0

マウスホイールのイベントを使用して、divのコンテンツにスクロール効果を作成しようとしている関数があります。

リスナー：

document.getElementById('menu_base').addEventListener("mousewheel", scrollfunc, false);

私は私のスクロールイベントのためにこれを持っています：

function scrollfunc(e){
console.log(e);
        if(e.wheelDeltaY == 120) { //this does work
            document.getElementById('menu_base').style.marginTop += 50; //no change
        } else if(e.wheelDeltaY == -120){ //as does this
            document.getElementById('menu_base').style.marginTop -= 50; //no change
        }           
}

console.logは次のことを示しています。

WheelEvent {webkitDirectionInvertedFromDevice: false, wheelDeltaY: -120, wheelDeltaX: 0, wheelDelta: -120, webkitMovementY: 0…}

menu_baseプロパティは次のとおりです。

.menu_base{
    width:100%;
    height:600px;   
    position:absolute; 
    left: 0; 
    top: 0;     
    text-align:center;
    border:1px solid black;
    overflow:hidden;
}

それでもコンテンツは移動せず、marginTopは変更されていないようです。

考えられる原因について何か提案はありますか？

4

1 に答える 1

1

marginTopたとえば、次を使用して、単位でを定義する必要がありますpx。

var menu_base = document.getElementById('menu_base');

function scrollfunc(e) {
    console.log(e);
    var mtop = parseInt(menu_base.style.marginTop, 10) || 0;

    if (e.wheelDeltaY == 120) { //this does work
        mtop += 50; //no change
    } else if (e.wheelDeltaY == -120) { //as does this
        mtop -= 50; //no change
    }
    menu_base.style.marginTop = mtop + 'px';
}

フィドル

于 2013-01-21T05:14:24.370 に答える