在jQuery中创建水平滚动

Create an horizontal scroll in jQuery

本文关键字：水平 滚动 创建 jQuery      更新时间：2023-09-26

我在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/

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

使用鼠标滚轮事件检测鼠标滚轮滚动.. 请检查 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"的值

更新

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

相关文章：