时间:2021-07-01 10:21:17 帮助过:3人阅读
1 3 4 5 6全屏遮罩 8 9 10 11 2425 26
以上代码是一个遮罩层的简易演示代码。
在页面没有滚动条的情况下都能满足要求。但是当页面有滚动条时,你就会发现,以上的处理方式并不能满足全屏遮罩。
下面就通过结合javascript的方式,实现页面包含滚动条时的全屏遮罩。
这里将会用到上一篇文章中的两个方法:scrollWidth,scrollHeight。相关处理方式如下:
1 var floatBg = document.getElementById("float-bg");2 floatBg.style.width= document.body.scrollWidth + "px";
floatBg.style.height = document.body.scrollHeight + "px";
这样处理,不管页面是否包含滚动条,都能实现全屏遮罩了。