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

JavaScript051

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

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

1、阻止所有能导致页面滚动的事件。//scroll不能阻止，只能阻止mousewheel，鼠标拽滚动条就悲剧了；

2、bodyoverflow:hidden//win下右侧滚动条会消失导致页面横移，移动端阻止不了；

3、把滚动部分单独放在一个div里，和弹出部分同级，body和window同高。//所有涉及offset/scrollTop的方法都要修改。fix并且width100%的元素(比如微博顶栏)会压在内容区滚动条上；

4、弹出时算scrollTop，给内容区fix然后top移动到目前位置，同时body给一个overflow-y:scroll强撑出滚动条。