完美解决js 禁止滚动条滚动，并且滚动条不消失，页面大小不闪动

JavaScript011

完美解决js 禁止滚动条滚动，并且滚动条不消失，页面大小不闪动,第1张

当前的项目遇到了这个问题， 当打开dialog的时候，希望主页面的滚动条不要滚动。 一番搜索之后，发现大家的解决办法分为两种。一种就是隐藏滚动条 ，但是这样的话，前台页面会因为滚动条的隐藏和出现而发生宽度的变化。 这就使得每次一打开dialog页面就会伸缩。十分难受。第二种 就是不知道从哪儿抄的这种方法。一番修改之后，我也没好用。 最后 终于在外网找到个完美解决方案。 根据需求自行修改。 *（在scrollTo方法中，最好加上behavior:'instant'）

<body scroll="no"> //关闭滚动条，没有滚动条就无所谓拖动滚动条了

再加上

<script>

var oBody=document.body

oBody.onmousewheel=function (){

var ch=-1 //滚动幅度，负数表示鼠标上滚，页面上滚；正数表示鼠标下滚，页面反而上滚

oBody.scrollTop+=event.wheelDelta*ch

}

</script>

加滚动鼠标的事件来调整页面就OK了

不关闭滚动条的话，倒还有种方法可行，不过拖动滚动条时页面会闪烁，不够完美。

<script>

var o=document.body//这里可以是其他任何元素

var st=0

setInterval(setScrollTop,100)

o.onmousewheel=function (){

var ch=-1

st=st+event.wheelDelta*ch

}

function setScrollTop(){

o.scrollTop=st

}

</script>

1、首先需要新建一个HTML文档，这里设立一下基本的架构。

2、再新建一个CSS文件，用link关联一下HTML文档。

3、创建DIV标签，并且往里面填充内容。

4、先设定一下滚动条内框的大小。

5、用border先来查看是否有超出，这里可以看出超出了很多内容。

6、overflow-y: scrolloverflow-x: scroll加上这个样式滚动条就会出现了。

7、现在就能对轨道和滚动条进行样式的设置了。