wap端出现对话框等遮罩层时禁止页面滚动

原创 greenhand 随笔 页面效果 271阅读 2017-12-23 14:46:40 举报

javascript 代码

javascript 代码

还一种方法是不对body设置position:'fixed',而是对body对html、body设置高度100%,然后对body使用overflow:hidden; translateY(-windowScrollTop) 。

设置height:100%后body内容会自动滚到顶部,所以需要使用translateY来定位到之前对位置。注意不能使用scrollTop来定位,因为在许多移动浏览器下,即使body里对内容高度比屏幕高度大,body.scrollHeight仍然为屏幕高度,这样设置body.scrollTop会无效。这跟规范不符,应该是个bug,在pc端浏览器里body.scrollHeight就是正常的,即比屏幕高度大。

scrollHeight即使在pc端其实也存在兼容性问题
当内容高度比容器height小时,容器的scrollHeight确实就是容器自身的height,这一点没错;
但当内容的高度大于容器自身的height时,容器的scrollHeight并不一定就是内容的高度了,因为scrollHeight还跟容器自身的padding有关,而且不是简单的内容高度+容器的上下padding,这跟容器的overflow值有关,而且还存在兼容性问题,使用的时候需要相当谨慎。

自己测试时,内容高度比容器高度大时的情况如下:

firefox下的容器scrollHeight跟自身overflow无关,跟mdn文档解释的一样。
当scrollTop=0时,如果内容的底部没有超过容器的padding-bottom下边界,scrollHeight=容器paddingTop+容器height+容器paddingBottom;
当scrollTop=0时,如果内容的底部超过了容器的padding-bottom下边界,scrollHeight=容器paddingTop+内容高度;

而chrome和safari下,scrollHeight跟overflow有关。

mdn关于scrollHeight的描述如下:(这只适用firefox,其他的浏览器不一定是这样,还跟容器overflow值有关)
Element.scrollHeight 这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的border和margin.
可以理解成一句话,scrollHeight就是容器的paddingTop上边界到内容下边界或者容器paddingBottom下边界的距离(即scrollTop为0时,内容下边界和容器paddingBottom下边界,哪个更靠下就取哪个)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复