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

JavaScript015

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

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

可以设置定高定宽停顿,把文字改成图片就行。通过css定位,来设置div在页面滚动中固定不动,CSSposition定位属性static元素框正常生产relative相对定位:相对于正常定位进行偏移absolute绝对定位:相对于其包含块定位.因为绝对定位的框与文档流无关。

很多时候,需要对div进行固定,比如在线咨询模块,这就需要固定div在显示页面的位置,而不能随滚动条滚动。

思路:将需要固定的div做成悬浮框,目的是能和别的div块重合,然后当触发滚动条事件,动态改变div坐标。

代码:

jsp中:

<body>

<div style="position: absolutez-index:90" id="div1">我不动</div>

<div>我动<div>

</body>

//有的将position设置成fixed,我试了试效果不如position好,设置z-index,向里的深度,我这儿设置90,你要覆盖几个div,设置数大于那个数就行。

js中:

我这儿用jquery写。

$(document).ready(function(){

$(window).scroll(function(){//滚动时触发函数

$("#div1").css("top",$(document).scrollTop())//将滚动条高度赋给悬浮框。

})

})

导入jquery库,效果就出来了。