Переместить/прокрутить элемент в родительском div

Что я хочу попробовать, так это заставить 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>

jquery mousewheel
person user1563944    schedule 02.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ниже ссылка на обновленный пример вашего JSFiddle. Я немного модифицировал его. По сути, все, что вам нужно сделать, это обновить верхнюю позицию #box. Box теперь позиционируется абсолютно внутри #wrapper.

Другой вашей проблемой была дельта. Не уверен, как вы пытались его получить, но в вашем примере он не был определен.

var delta = event.originalEvent.wheelDelta;

Получите дельту колесика мыши, затем вы сможете использовать ее для определения своей новой верхней позиции. Надеюсь это поможет!

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

person thomallen    schedule 02.06.2013
comment
миллион спасибо за переделку. Я думаю, что дельта не работала, потому что я использовал плагин, который я сделал ref в скрипте js. Однако один вопрос: как дельта определяет позицию? - person user1563944; 03.06.2013