Question

我想要尝试做的是让div #box在其父元素#wrapper内上下移动/滚动，具体取决于移动mousewheel的方式。

我已经知道了，它知道mousewheel何时根据delta向上或向下移动，但我不明白它是如何工作的{{1}鼠标滚轮向上或向下移动时，以实际像素（非速度）动态移动。

我正在使用jQuery和这个鼠标滚轮插件http://brandonaaron.net/code/mousewheel/docs。

JS

#box

CSS

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

});

HTML

#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;
}

Answer 1

在指向JSFiddle的更新示例的链接下方。我修改了很多。基本上你需要做的就是更新#box的顶部位置。 Box现在也位于#wrapper的绝对位置。

你的另一个问题是delta。不确定你是如何尝试的，但在你的例子中它是未定义的。

var delta = event.originalEvent.wheelDelta;

将获得鼠标轮三角形，然后您可以使用它来确定您的新顶部位置。希望这有帮助！

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

在父div中移动/滚动元素

1 个答案: