zoukankan      html  css  js  c++  java
  • 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">
    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>
  • 相关阅读:
    Openlayer 3 的画图测量面积
    Openlayer 3 的画线测量长度
    屏幕尺寸
    px和em,rem的区别
    水平和垂直居中
    Flex布局
    继承的几种方法及优缺点
    call ,apply 和 bind的用法与区别
    mybatis springmvc velocity的demo
    正则同时包含两个关键字
  • 原文地址:https://www.cnblogs.com/ahjesus/p/2262105.html
Copyright © 2011-2022 走看看