关于浏览器的滚动条

html和body的overflow属性

1.当html和body当中,只设置了其中的一个overflow属性,此时overflow属性作用于文档.
2.当html和body中,都设置了overflow属性,html和body的overflow属性,前者作用于文档,后者则作用于自己.

测试代码:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>011-滚动条</title>
  <style>
    html{
      margin: 20px;
      border: 1px solid;
      height: 100%;
      overflow: scroll;
    }
    body{
      margin: 20px;
      border: 1px solid pink;
      height: 100%;
      overflow: scroll;
    }
  </style>
</head>
<body>
  <div style="height: 1000px;">
  </div>
</body>
</html>

禁止浏览器默认滚动条

利用上面的特点,可以利用禁止系统滚动条,用绝对定位模拟固定定位,达到解决在IE6下固定定位失效的问题.

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>012-绝对定位模拟固定定位</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html{
      height: 100%;
      overflow: hidden;
    }
    body{
      height: 100%;
      overflow: auto;
    }
    #test{
      position: absolute;
      left: 50px;
      top: 50px;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    
  </style>
</head>
<body>
  <div id="test">
  
  </div>
  <div style="height: 1000px;"></div>
</body>
</html>
posted @ 2021-03-26 19:40  逆风的悦  阅读(76)  评论(0)    收藏  举报