CSS模拟HTML滚动条

最新推荐文章于 2023-08-15 07:57:17 发布

weixin_33877092

最新推荐文章于 2023-08-15 07:57:17 发布

阅读量115

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/ahjesus/archive/2011/11/24/2262105.html

版权

一大特点是JS遮罩层可以覆盖到滚动条，弊端就是如果body设置有背景那背景是不会随着滚动条滚动的，也是一大特色演示如下

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
 6 <title>test</title>
 7 <style type="text/css">
 8 html {
 9         overflow:hidden;
10         width:100%;
11         height:100%;
12 }
13 body {
14         width:100%;
15         height:100%;
16         margin:0px;
17         overflow-y:scroll;        
18 }
19 #mask {
20         width:100%;
21         height:100%;
22         position:absolute;
23         top:0;
24         left:0;
25         z-index:100;
26         background:#000;
27         filter:Alpha(opacity=30);
28         opacity:0.3;
29         display:none;
30 }
31 </style>
32 </head>
33 <body>
34 <div style="height:1000px"><button onclick="document.getElementById('mask').style.display = 'block'">显示</button></div>
35 <div id="mask" ondblclick="this.style.display = 'none'"></div>
36 </body>
37 </html>

转载于:https://www.cnblogs.com/ahjesus/archive/2011/11/24/2262105.html

weixin_33877092

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS模拟HTML滚动条

一大特点是JS遮罩层可以覆盖到滚动条，弊端就是如果body设置有背景那背景是不会随着滚动条滚动的，也是一大特色演示如下 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
复制链接

扫一扫