有弹层时禁止页面滚动

原创 lzh2740128806 随笔 js 887阅读 2017-11-17 17:01:31 举报

工作遇到的需求,弹层弹出时需要禁止页面滚动。

查了下网上最好的方法是给 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 )
最新评论
lzh2740128806 7F 2017-11-18 19:34:55 8F

我之前也写来着,着急用所以用的插件,也就没有接着写。

bestime 6F 2017-11-18 13:53:13 7F

这个是我以前写的。当时是用来自定义滚动条的。callback会返回当前滚轮滚动方向,然后可以自己决定滚动一下滚动多少距离和定义滚动动画。

lzh2740128806 5F 2017-11-18 12:34:38 6F

你这个元素内滚动到底部后禁止父级或页面滚动非常好用

bestime 4F 2017-11-18 12:19:34 5F

好吧。只能说我有强迫症

lzh2740128806 3F 2017-11-18 09:59:57 4F

我觉得布局也不怎么需要考虑,原有的页面后期最外层加个盒子也不会有什么影响,我的需求是弹层也有内容需要滚动,并且是移动页面。
禁止滚动时没有滚动条的问题可以在禁止时给body加个overflow-y: scroll;

bestime 2017-11-18 09:09:13 3F

这样把滚动条也给影响了。而且还要考虑布局。有些情况下不好用。
给你看看我这个,禁止鼠标滚轮,但不禁止鼠标拖动滚动条。
html 代码

lzh2740128806 1F 2017-11-17 21:09:05 2F

安卓没问题,iOS估计也可以,你可以打开看看,我没有苹果手机

921021656 2017-11-17 18:34:53 1F

移动端好用吗安卓和ios的