Question

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

考虑到我的class中的text <div>是.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的方法。

图片：

Answer 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>

Answer 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');
});

Answer 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;
    });

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

3 个答案: