JavaScript 代码
- // 出现遮罩层时阻止页面滚动
- (function () {
- var $document = $(document),
- $body = $('body'),
- scrollTop,
- marginTop,
- height,
- overflow;
- Windows.preventPageScroll = function () {
- scrollTop = $document.scrollTop();
- marginTop = $body[0].style.marginTop;
- height = $body[0].style.height;
- overflow = $body[0].style.overflow;
- $body.CSS({
- marginTop: -scrollTop,
- height: innerHeight + scrollTop,
- overflow: 'hidden'
- });
- };
- Windows.restorePageScroll = function () {
- $body[0].style.marginTop = marginTop;
- $body[0].style.height = height;
- $body[0].style.overflow = overflow;
- $document.scrollTop(scrollTop);
- }
- }());
JavaScript 代码
- // 出现遮罩层时阻止页面滚动
- (function () {
- var $Windows = $(Windows),
- $body = $('body'),
- windowScrollTop;
- Windows.preventPageScroll = function () {
- windowScrollTop = $Windows.scrollTop();
- $body.CSS({
- position: 'fixed',
- top: -windowScrollTop
- });
- };
- Windows.restorePageScroll = function () {
- $body.CSS('position', '');
- setTimeout(function () {
- $Windows.scrollTop(windowScrollTop);
- });
- }
- }());
还一种方法是不对 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 下边界, 哪个更靠下就取哪个)
来源: http://www.qdfuns.com/article/17631/1a494aa6aef78d9793e4bf47fa1f08ed.html