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

JavaScript016

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

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

html,body同时设为overflow:hidden。

css样式部分：

.ovfHiden{overflow: hiddenheight: 100%}

jquery部分：

$('html,body').addClass('ovfHiden')//使网页不可滚动

$('html,body').removeClass('ovfHiden')//使网页恢复可滚动

也可以通过

可以通过样式overflow-x来控制横向滚动条的出现与否，语法如下：

overflow-x：<overflow-style>

<overflow-style>= visible | hidden | scroll | auto

默认值：visible

取值：

visible： 不剪切内容。

hidden： 将超出对象宽度的内容进行裁剪，将不出现滚动条。

scroll： 将超出对象宽度的内容进行裁剪，并以滚动条的方式显示超出的内容。

auto： 在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。 说明：检索或设置当对象的内容超过

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“//开启纵向滚动条