JS marginTop中的滚动功能不会改变

Question

我有一个函数，我试图通过使用鼠标滚轮事件在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似乎没有改变。

对可能的原因有什么建议？

Answer 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'; 
} 

Fiddle