Home > Article > Web Front-end > How to set the scroll bar beyond the part to be hidden in css

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

醉折花枝作酒筹Original: 2021-04-09 18:17:544375browse

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>

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>

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!

html5 css css3 webkit display overflow

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to make css shadowNext article：How to make css shadow

See more

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

Related articles