浏览器滚动条规则

1.如果html标签及body标签中只有一个标签具有overflow属性，该属性将作用于文档（即视窗是否显示滚动条）

        html {
            margin: 30px;
            border: 1px solid red;
        }

        body {
            margin: 30px;
            border: 1px solid orange;
            overflow: scroll;
        }

2.如果html标签及body标签中均具有overflow属性，则html将控制视窗的滚动条，而body将控制body的滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="font/style.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            margin: 30px;
            border: 1px solid red;
            overflow: hidden;
        }

        body {
            margin: 30px;
            border: 1px solid orange;
            overflow: scroll;
        }

    </style>
</head>
<body style="height: 1000px;">
</body>
</html>

3.使用absolute的定位模拟fixed的定位

注：fixed与absolute定位的区别体现于有滚动条出现的时候
当拖动系统滚动条时，初始包含块会被拖动，而拖动任意其他元素滚动条时，初始包含块不会被拖动；因此禁用系统滚动条，则fixed定位可与absolute定位相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="font/style.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            overflow: hidden;
            height: 110%;
        }

        body {
            overflow: scroll;
            height: 100%;
        }

        #test {
            width: 100px;
            height: 200px;
            position: absolute;
            left: 50px;
            top: 50px;
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
<div id="test"></div>
</body>
</html>

来源：https://www.cnblogs.com/kanaliya/p/12287910.html

标签

滚动条