mousewhellでページを1つずつスクロール

Question

私のスクロールは正常ですが、マウスホイールを使用すると画像1から画像3または4にジャンプします。 スクロール/マウスホイールで一度に1アイテムを読み込む方法は？ は、私は例

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

なくてmouseWheelスクロールとする方法

myScroll.next(); 

が、リンクを使用してこの作業を実装するために、この

http://iscrolljs.com/#snap

を読みました。

モバイルで同じ問題が発生しました（垂直の「光」（最小））スワイプは画像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(); 

}); 

EDIT 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

このコードは動作しません。あなたは、このイベントのために探しているものを行います'マウスホイールDOMM ouseScroll 'マウスホイールのイベントをリッスンし、デルタはスクロールで移動する距離です。

$(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 
     } 

    }); 
});