0

我想要尝试做的是让 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>
4

1 回答 1

1

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

你的另一个问题是三角洲。不确定您是如何尝试获取它的，但在您的示例中它是未定义的。

var delta = event.originalEvent.wheelDelta;

将为您提供鼠标滚轮增量，然后您可以使用它来确定新的顶部位置。希望这可以帮助！

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

于 2013-06-02T20:57:04.417 回答