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>
  • 相关阅读:
    Java compiler level does not match the version of the installed Java Project facet.
    Project configuration is not up-to-date with pom.xml. Select: Maven->Update Project... from the project context menu or use Quick Fix.
    JavaScript
    JavaScript
    Eclipse
    Eclipse
    Oracle
    Java
    Ext JS 4.2
    Eclipse
  • 原文地址:https://www.cnblogs.com/ahjesus/p/2262105.html
Copyright © 2011-2022 走看看