我在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/
如何触发该事件以及如何向左/右移动滚动取决于鼠标滚动的方向?
答案 0 :(得分:0)
使用鼠标滚轮事件检测鼠标滚轮..请检查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/