スクロールエリアの単位/ javascriptのdiv？ JavaScriptで

Question

は、私は確信して垂直 のみJavaで（さんが言わせて）16個のピクセル

のチャンクで私の大のdivのスクロールことを確認することができ、それらは「増分の単位」と呼ばれています。

javascriptでこれと似たものが見つかりません： 部分的にスクロールされた特定の領域（div）が常に16の倍数になるようにしたいと思います。

これで、私は背景画像などでトリックを行うことができます。

おかげ

Answer 1

var lastScroll = 0; 
$('div').scroll(function(){ 
    var el = $(this), 
     scroll = el.scrollTop(), 
     round = lastScroll < scroll ? Math.ceil : Math.floor; 
    lastScroll = round(scroll/16) * 16; 
    el.scrollTop(lastScroll); 
}); 

http://jsfiddle.net/m9DQR/2/

スクロールが16個の画素の倍数で行われるようにします。これを簡単に拡張して、可変量（固定、魔法の16ではない）を可能にするプラグインにすることができます。

Answer 2

はい、これは可能であるが、それは、スクロールイベントをキャプチャし、それを操作するためにはJavaScriptを使用して必要になります。このスクリプト（申し訳ありませんjQueryは私が持っていたものです）とスクロールイベントをオーバーライドします。その後、同じスクロール距離で置き換えられます。 scrollToの値を調整するためにあなた自身の数学を実行することができます。 mousewheelとDOMMouseScrollの両方のイベントをチェックする必要があります。なぜなら最初のイベントはFFでサポートされていないからです。あなたの場合はこれは当てはまりませんが、スクロールする行数はデフォルトの3以外に設定されていることがあります。したがって、ifステートメントは距離を計算します。私はそれをそこに残しましたが、他の人がこの質問に遭遇した場合に備えて、それは重要です。

$('body').bind('mousewheel DOMMouseScroll', function(e) { 
    var scrollTo = null; 
    if (e.type == 'mousewheel') { 
    scrollTo = (e.wheelDelta * -1); 
    } 
    else if (e.type == 'DOMMouseScroll') { 
    scrollTo = 40 * e.detail; 
    } 
    //adjust value of scrollTo here if you like. 
    scrollTo = 16; 
    if (scrollTo) { 
    e.preventDefault(); 
    $(this).scrollTop(scrollTo + $(this).scrollTop()); 
    } 
}); 

Answer 3

私はUIを扱う際にJavaScriptが難しいと感じました。あなたの場合は、イベントonscrollにハンドラを設定し、スクロール位置に対するdivの位置を照会するだけです。 divの位置が16pxで割り切れない場合はfalseを返し、別の16pxをスクロールした後に位置を変更できるようにカウンタを作成します。