document.documentElement.style.overflow='hidden'
document.body.style.overflow='hidden'//手机版设置这个。
如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效。
但是 你用键盘的 上下左右键,你会发现,页面仍然可以滚动。 别着急 往下看
2,在 1 的基础上 添加 js功能
var move=function(e){
e.preventDefault &&e.preventDefault()
e.returnValue=false
e.stopPropagation &&e.stopPropagation()
return false
}
var keyFunc=function(e){
if(37<=e.keyCode &&e.keyCode<=40){
return move(e)
}
}
document.body.onkeydown=keyFunc
好了 ,到了这里,你会发现页面木有任何问题了。鼠标,键盘 都不能将页面滚动。
不过....对于高级用户来说,仍然有问题,比如 继续往下看
3,假设用户希望 滚动条 一直处于显示状态 肿么办捏???? ok ,继续
var st
var scroll=function(e){
clearTimeout(st)
st=setTimeout(function(){
window.scrollTo(loc.scrollLeft,loc.scrollTop)
},5)
}
window.onscroll=scroll
上述代码 可以似的 用户的任何滚动操作,都将被还原。注意这个方式很消耗内存(虽然做了setTimeout),但是谁让需求比较二逼呢对吧~
css只是层叠样式表,是控制页面的样式的,并不能对一些操作进行控制。至于禁止鼠标滑轮的滚动是需要用js控制的,在js中有一个mousewheel事件,对这个事件进行设置,可以实现对鼠标滚轮的一些操作。document.body.parentNode.style.overflow = “hidden"//隐藏且禁用横向纵向两个滚动条document.body.parentNode.style.overflow = “auto"//开启横向纵向两个滚动条
document.body.parentNode.style.overflowX = ”hidden“//隐藏横向滚动条
document.body.parentNode.style.overflowX = ”auto“//开启横向滚动条
document.body.parentNode.style.overflowY = ”hidden“//隐藏纵向滚动条
document.body.parentNode.style.overflowY = ”auto“//开启纵向滚动条