Question

我在div中有一个水平滚动，其宽度小于子宽度。

我使用CSS

div {
  width: 300px;
  overflow: auto;
}

div p {
  width: 600px;
}

和HTML：

<div>
  <p>
  this is very looooooooooong text and very loooonggg paragraph
  </p>
</div>

我想在向下滚动时（从鼠标中）添加滚动侦听器，然后将该div的内容向右滚动，如果向上滚动则将div的内容向左滚动。

var lastScrollTop = 0;

$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

似乎$(window).scroll没有触发。

我创建了jsfiddle：https://jsfiddle.net/t8Lc4pjs/

如何触发该事件以及如何向左/右移动滚动取决于鼠标滚动的方向？

Answer 1

使用鼠标滚轮事件检测鼠标滚轮..请检查https://jsfiddle.net/t8Lc4pjs/2/

<强>的jQuery

$(document).ready(function(){
var i=0;
     $(document).on('mousewheel', function(e){
    if(e.originalEvent.wheelDelta /120 < 0) {
   console.log('down');
   $('.scl').scrollLeft(i++);
    }
    else{
     console.log('up');
     $('.scl').scrollLeft(i--);
    }

    });
});

注意：如果要更快地滚动位，请增加“i＆＃39;”的值。更多

<强>更新

我添加了代码来停止i的值超过div的宽度并且低于0并且还使滚动位更快，请检查此https://jsfiddle.net/t8Lc4pjs/3/

在jQuery中创建一个水平滚动

1 个答案: