JS中marginTop的滚动功能没有改变
Scrolling function in JS marginTop is not changing
我有一个函数,我试图通过使用鼠标滚轮事件来创建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似乎也没有改变。
对可能的原因有什么建议吗?
您需要用一个单元来定义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';
}
小提琴
相关文章:
- 在窗口改变方向时调整内容大小之前激发功能
- 如何改变“;活的“;至“;关于“;在这个脚本中,jquery具有相同的功能
- 移动设备上的“调色精灵”禁用了使用相位器改变精灵状态的功能
- 对象的属性在改变时激活功能
- Jquery的点击功能在3个类之间改变.为什么不工作呢?
- 改变后台javascript功能不工作
- 改变Jquery滑块来执行一个功能
- Jquery点击处理布尔值改变后的额外功能
- 如何创建一个按钮来改变从“全选”的功能选择none"在此Javascript代码中
- 输入字段值在单击功能中不改变
- 改变输入的火灾功能;使用jQuery标记(复选框/文本框)
- 为什么点击功能不工作后,我改变了一个按钮的类
- 我如何改变回innerhtml与jQuery在一个点击功能
- “arguments"属性在Chrome的功能改变
- 改变图像加载的功能
- 一键改变功能参数
- 改变功能范围
- 在车把上点击改变功能
- Jquery改变功能不工作在html的形式
- jQuery试图根据元素的id来改变功能