用鼠标滚轮一页一页地滚动答案

【问题标题】：Scrolling pages one by one with mousewhell用鼠标滚轮一页一页地滚动
【发布时间】：2016-04-27 23:51:28
【问题描述】：

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

实现方法

myScroll.next();

但是这适用于链接，例如

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

但不能使用鼠标滚轮滚动。

移动设备上的相同问题（使用垂直“光”（（最小））滑动我转到图像 2，使用“法向力”滑动我转到图像 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();

});

【问题讨论】：

标签： javascript jquery mousewheel iscroll

【解决方案1】：

这段代码做你要找的，这个事件'mousewheel DOMMouseScroll'监听鼠标滚轮事件，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
        }

    });
});

【讨论】：