我正在制作一个页面,在向下滚动时,页面的左侧将向上滑动,右侧将向下滑动。同时,向上滚动时,页面的左侧将向下滑动,右侧将向上滑动。
如果用户只使用鼠标滚轮滚动一次,则此功能可正常工作。如果在该函数完成之前多次滚动(滚动多次),则左侧和右侧将继续滚动并出现问题。有没有办法禁用多次滚动?
我已经添加了我的代码和下面的fiddle。
如果用户只使用鼠标滚轮滚动一次,则此功能可正常工作。如果在该函数完成之前多次滚动(滚动多次),则左侧和右侧将继续滚动并出现问题。有没有办法禁用多次滚动?
我已经添加了我的代码和下面的fiddle。
<div class="left">
<div id="left1" class="onLeft Side">
</div>
<div id="left2" class="onLeft Side">
</div>
<div id="left3" class="onLeft Side">
</div>
</div>
<div class="right">
<div id="right3" class="onRight Side">
</div>
<div id="right2" class="onRight Side">
</div>
<div id="right1" class="onRight Side">
</div>
</div>
$(document).ready(function(){
var wholeHeight = jQuery('.right').height();
var rightLength = jQuery('.onRight').length;
jQuery('.right').css({top:-((wholeHeight*rightLength)-wholeHeight)});
var leftHeight = jQuery('.left').height();
var leftLength = jQuery('.onLeft').length;
var tot = (leftHeight * leftLength) - leftHeight;
console.log('tot', tot)
$('body').bind('mousewheel', function(e){
var height = jQuery('.left').height();
var leftTop = jQuery('.left').position().top;
var rightTop = jQuery('.right').position().top;
if(e.originalEvent.wheelDelta /120 > 0) {
if (leftTop != 0) {
console.log('scrolling up !');
jQuery('.left').animate({top:leftTop + height});
jQuery('.right').animate({top:rightTop - height});
} else {
console.log('The up end');
}
} else {
if (leftTop != -tot) {
console.log('scrolling down !');
jQuery('.left').animate({top:leftTop - height});
jQuery('.right').animate({top:rightTop + height});
} else {
console.log('the down end')
}
}
});
});
https://jsfiddle.net/11pftj26/
Thanks