在父div內的移動/滾動元素

Question

我想要嘗試的是獲取div #box在其父元素#wrapper中上下移動/取決於移動mousewheel的方式。

，以便它知道什麼時候mousewheel被向上或向下移動基礎上，delta我知道了，但我不明白的是它是如何工作得到#box在實際像素動態移動（不是速度）當鼠標滾輪向上或向下移動時的數量。

我正在使用jQuery和這個鼠標滾輪插件http://brandonaaron.net/code/mousewheel/docs。

我設置這個例子了http://jsfiddle.net/sSrvv/

JS

$(document).ready(function(){ 

$('#box').bind('mousewheel' , function(event,delta){ 
    var pixelVal = 0; 

    if (delta > 0) { 
     // mousewheel going up 
     // pixelVal = amount of pixel #box should move; 
     $('#box').css('WebkitTransform' , 'translate(0px, -'+ pixelVal +'px)'); 
    }else { 
     // mousewheel going down 
      // pixelVal = amount of pixel #box should move; 
     $('#box').css('WebkitTransform' , 'translate(0px, '+ pixelVal +'px)'); 
    }; 
}); 

}); 

CSS

#data { 
    position: fixed; 
    top: 10px; 
    right: 10px; 

    border: 1px solid #333; 
    padding: 10px; 
    } 

#wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 

    width: 300px; 
    height: 600px; 

    background-color: #ffff00; 
} 

#box { 
    position: relative; 
    width: 100%; 
    height: 300px; 

    background-color: #000; 
} 

HTML

<div id="data">put data here</div> 

<div id="wrapper"> 

<div id="box"></div> 

</div> 

Answer 1

以下鏈接，您的jsfiddle的更新例子。我修改了很多。基本上所有你需要做的就是更新#box的頂部位置。 Box現在也位於#wrapper的絕對位置。

你的其他問題是三角洲。不知道你是如何得到它的，但在你的例子中它是未定義的。

var delta = event.originalEvent.wheelDelta; 

會給你鼠標三角洲，那麼你可以用它來確定你的新頂端位置。希望這可以幫助！

http://jsfiddle.net/sSrvv/1/