0

私が試してみたいことは、移動方法に応じて、#box親要素内で div を上下に移動/スクロールさせることです。 #wrappermousewheel

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 に答える