Question

我的滚动条工作正常但是当我使用鼠标滚轮时，我从图像1跳转到图像3或4。如何使用滚动/鼠标滚轮一次加载一个项目？我已经读过这个

了

实现方法

myScroll.next();

但这可以使用链接，例如

$( "#link" ).click(function() {
myScroll.next();
});

但没有使用mouseWheel滚动。

移动设备上的相同问题（使用垂直＆＃34;灯光＆＃34;（（最小））轻扫我转到图像2，使用＆＃34;法向力＆＃34;轻扫我转到图像3或4）。请注意我使用的是JQuery。

HTML

<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image5.jpg" /></li>
</ul>

JAVASCRIPT

$(document).ready(function() {
var myScroll;
function loaded () {
var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollX: true,
scrollbars: true,
momentum:false,
fade: true,
snap: 'li'
});

setTimeout( function(){
myScroll.refresh() ;
} , 200 ) ;
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
loaded();

});

编辑1 这段代码不起作用

$(document).ready(function() {

var myScroll;
function loaded () {
    var myScroll = new IScroll('#wrapper', {
    mouseWheel: false,
    snapThreshold: 0.334,
    scrollbars: true,
    requestAnimationFrame: false,
    momentum:false,
    fade: true,
    snap: 'li',
    snapSpeed: 773
    });



    /* FUNCTION ***************************/
    $(function() {
        var $window = $(window);
        $window.on('mousewheel DOMMouseScroll', function (event) {
        //-1 scroll down, 1 scroll up
        event.preventDefault();

        var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.deltaY/3 || event.originalEvent.detail;

        if (delta < 0) {
            myScroll.prev();
        }
        else if(delta > 0) {
            myScroll.next();
        }

        });
    });
    /* END FUNCTION ***************************/

    setTimeout( function(){
        myScroll.refresh() ;
    } , 200 ) ;
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

loaded();

});

Answer 1

此代码执行您正在寻找的内容，此事件＆＃39; mousewheel DOMMouseScroll＆＃39; 侦听鼠标滚轮事件，delta是滚动移动的距离。

$(function() {
    var $window = $(window);
    $window.on('mousewheel DOMMouseScroll', function (event) {
        //-1 scroll down, 1 scroll up
        event.preventDefault();

        var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.deltaY/3 || event.originalEvent.detail;

        if (delta < 0) {
            //scroll down
        }
        else if(delta > 0) {
            //scroll up
        }

    });
});

使用mousewhell逐页滚动页面

1 个答案: