工作遇到的需求,弹层弹出时需要禁止页面滚动。
查了下网上最好的方法是给 body 加 height: 100%; overflow: hidden; ,加上发现没有生效,又发现需要加 position: fixed; ,加上后确实可以禁止滚动,但是页面会回到页首。
然后就想着禁止后滚到禁止前滚动到的位置,但是页面滚动 IE、新版chrome 和 火狐 是 document.documentElement.scrollTop 生效,而不是 body.scrollTop 生效,body高已经为屏幕高了,html不能滚动。然后就把 height: 100%; overflow: hidden; 加到了 html 上,就可以设置 scrollTop 了,测试最起码可以兼容到IE7。
但是 老版本chrome 是 body.scrollTop 滚动页面,所以我就加了个 #container 的最外层的盒子来承担这个实现页面滚动的任务,以确保所有的浏览器都可以完美的兼容。
优点:
至少可以兼容到ie7,pc、移动、响应式页面都可以用,弹层内容可以滚动,js逻辑较少。
缺点:
需要考虑布局,不需要满足上述所有需求的可以换更简单的方法。
希望对有需要的同学会有所帮助。
html 代码
评论 (8 )
最新评论
我之前也写来着,着急用所以用的插件,也就没有接着写。
这个是我以前写的。当时是用来自定义滚动条的。callback会返回当前滚轮滚动方向,然后可以自己决定滚动一下滚动多少距离和定义滚动动画。
你这个元素内滚动到底部后禁止父级或页面滚动非常好用
好吧。只能说我有强迫症
我觉得布局也不怎么需要考虑,原有的页面后期最外层加个盒子也不会有什么影响,我的需求是弹层也有内容需要滚动,并且是移动页面。
禁止滚动时没有滚动条的问题可以在禁止时给body加个overflow-y: scroll;
这样把滚动条也给影响了。而且还要考虑布局。有些情况下不好用。
给你看看我这个,禁止鼠标滚轮,但不禁止鼠标拖动滚动条。
html 代码
安卓没问题,iOS估计也可以,你可以打开看看,我没有苹果手机
移动端好用吗安卓和ios的