从外部触摸 <div> 内的滚动内容答案

【问题标题】：Touch scroll contents inside a <div> from outside it从外部触摸 <div> 内的滚动内容
【发布时间】：2019-09-22 03:49:36
【问题描述】：

（请看最后的图片）我的网站上有一个text <div>，但是它不是全宽的。我的文档的<body> 不滚动。当用户使用鼠标滚轮滚动时，我只需要 text <div> 滚动，但是，鼠标指针不在我的 text <div> 上。为此，我找到了一些 jQuery 代码。我在document.onload 上运行这个<script>：

考虑到我的text <div> 的class 是.scroll，以下代码有效：

var target = $('.scroll').get(0);
$('body').on('wheel', function (e)
    {
        var o = e.originalEvent;
        target.scrollTop += o.deltaY;
        target.scrollLeft += o.deltaX;
    });

所以，我的问题是，我需要为手机或触控设备添加相同的功能。即使用户在我的text <div> 之外触摸和滚动，text <div> 也应该滚动。我在同一个 <script> 标记中尝试了这个，但是没有用：

$('body').on('touchmove', function(e)
    { 
        var o2 = e.originalEvent;
        target.scrollTop += o2.deltaY;
        target.scrollLeft += o2.deltaX;
    });

我也尝试将其 .on('tou... 更改为 .bind('tou...，均无效。控制台也是空的。但是，如果我在上面的代码中添加console.log('touched');（在关闭}); 之前，控制台确实会在其中显示touched。所以，它可能工作，但是，滚动不起作用。

有人可以指导我如何使这个东西适用于触摸屏吗？我也对其他基于 JavaScript 的方法持开放态度。

图片：

【问题讨论】：

你能做一个codepen或类似的吗？ :)
@KevinSimper 在这里：jsfiddle.net/hrishikeshk/7ks5ztj8/6 抱歉耽搁了。
@RacilHilan 我现在尝试了on('scroll'，它不起作用，可能是因为<body> 不滚动。
您的 jsfiddle 在浏览器中为我工作。你是哪个浏览器有问题？没关系on('scroll'，我没有仔细阅读你的问题。
@RacilHilan 是的，我提到正常鼠标滚动正在工作。我想在基于触摸的滚动上做同样的事情。我正在使用 Chrome 77。

标签： javascript jquery html

【解决方案1】：

这个使用jquery的解决方案

const $parent = $('.parent')

$parent.on('wheel', function(e) {
  if (e.originalEvent.wheelDelta / 120 > 0) {
    $parent.animate({
      scrollTop: 0
    })
  } else {
    $parent.animate({
      scrollTop: $parent.prop('scrollHeight')
    })
  }
})

.parent {
  height: 160px;
  overflow: auto;
  background: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <h1>first</h1>
  <h1>second</h1>
  <h1>third</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>last</h1>
</div>

这是使用纯javascript的解决方案

const $parent = document.querySelector('.parent')

$parent.addEventListener('wheel', function(e) {
  if (e.deltaY > 0) {
    $parent.scrollTo(0, $parent.scrollHeight)
  } else {
    $parent.scrollTo(0, 0)
  }
})

.parent {
  height: 160px;
  overflow: auto;
  background: pink;
}

<div class="parent">
  <h1>first</h1>
  <h1>second</h1>
  <h1>third</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>last</h1>
</div>

【讨论】：

看来，这个是用按钮滚动的。我想使用普通的（基于鼠标滚轮的）滚动。
随心所欲地触发事件，我向你展示了滚动的工作原理
我在这里试过你的代码：jsfiddle.net/hrishikeshk/7ks5ztj8/7 不起作用。它只是在父 div 的滚动中产生一些意想不到的行为。
@HrishikeshKokate 你试错了，jsfiddle.net/nvbu19ws
啊，嗯，是的，明白了。但是，它仍然无法在触摸时工作。

【解决方案2】：

此代码可能会有所帮助..

$(window).on('touchstart', function(event){
    var currentScrl = event.originalEvent.changedTouches[0].clientY;
    var winTop = $(this).scrollTop();
    $(this).on('touchmove', function(event) {
        var scrolling = (event.originalEvent.changedTouches[0].clientY - currentScrl)*-1;
        $(this).scrollTop(winTop + scrolling);
    });
});
$(window).on('touchend', function(){
    $(window).off('mousemove');
});

【讨论】：

【解决方案3】：

这最终对我有用（这是整个代码，鼠标滚动+触摸滚动）：

var target = $('.scroll').get(0);
$('body').on('wheel', function (e)
    {
        var o = e.originalEvent;
        target.scrollTop += o.deltaY;
    });
var lastTouch = null;
window.addEventListener('touchstart', function (event)
    {
        lastTouch = event.touches[0];
    })
window.addEventListener('touchend', function (event)
    {
        lastTouch = null;
    })
window.addEventListener('touchmove', function (event)
    {
        var currentTouch = event.changedTouches[0];
        if (lastTouch)
            {
                target.scrollTop += lastTouch.clientY - currentTouch.clientY;
            }
        lastTouch = currentTouch;
    });

【讨论】：

我不知道为什么这被否决了。我会反对这一点。这不是最好的解决方案，但它有效。在touchmove 事件中移动的问题是它可以快速触发并导致性能问题。这就是为什么最好在touchend 事件中执行此操作。但如果即时反馈比绩效更重要，那么这种方法是可以接受的。
我检查了它并且工作正常，但滚动不顺畅。我们应该做些什么来改进它。我在 Iphone 11 Safari 上测试过