用鼠标逐个滚动页面

Scrolling pages one by one with mousewhell

本文关键字：滚动 鼠标      更新时间：2023-09-26

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

http://iscrolljs.com/#snap

实现该方法

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();
});

此代码执行您要查找的操作，此事件"鼠标滚轮 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
        }
    });
});
相关文章：