How to set the scroll bar beyond the part to be hidden in css-CSS Tutorial-php.cn

How to set the scroll bar beyond the part to be hidden in css

醉折花枝作酒筹

Release： 2021-04-09 18:17:54

Original

4428 people have browsed it

Method: 1. Use the "-webkit-scrollbar" attribute setting, the syntax "-webkit-scrollbar{display:none;}"; 2. Set the "overflow: hidden" style in the parent element div, and Sets the width for parent and child elements.

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Method 1. Use the new feature of css 3 -webkit-scrollbar, but this method is not compatible with Firefox and IE

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超出部分隐藏滚动条</title>
</head>
<style type="text/css">
    #box {
        width: 500px;
        height: 300px;
        overflow-x: hidden;
        overflow-y: scroll;
        line-height: 30px;
        text-align: center;
    }
    #box::-webkit-scrollbar {
        display: none;
    }
</style>
<body>
    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
    <div id="box">
        你好 </br>你好 </br>
        你好 </br>你好 </br>
        你好 </br>你好 </br>
        你好 </br>你好 </br>
        你好 </br>你好 </br>
        你好 </br>你好 </br>
        你好 </br>你好 </br>
    </div>
</body>
</html>

Copy after login

Method 2 , Utilize inner and outer nesting, simulation, compatible with all browsers, compared to method one, it is more troublesome, you cannot declare any style for the scroll bar when using it

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超出部分滚动条</title>
</head>
<style type="text/css">
    #box {
        /* 父容器设置宽度, 并超出部分不显示 */
        width: 500px;
        height: 300px;
        overflow: hidden;
    }
    #box > div {
        /* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
        width: 517px;
        height: 300px;
        line-height: 30px;
        text-align: center;
        overflow-y: scroll;
    }
</style>
<body>
    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
    <div id="box">
        <div>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
        </div>
    </div>
</body>
</html>

Copy after login

Recommended learning: css video tutorial

The above is the detailed content of How to set the scroll bar beyond the part to be hidden in css. For more information, please follow other related articles on the PHP Chinese website!