css如何設定超出部分捲軸隱藏-css教學-PHP中文網

css如何設定超出部分捲軸隱藏

醉折花枝作酒筹

發布： 2021-04-09 18:17:54

原創

4399 人瀏覽過

方法：1、使用「-webkit-scrollbar」屬性設置，語法「-webkit-scrollbar{display:none;}」；2、在父元素div裡設定「overflow: hidden」樣式，並為父元素和子元素設定寬度。

本教學操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

方法一、利用css 3 的新特性 -webkit-scrollbar, 但是這種方式不相容於火狐和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>

登入後複製

#方法二、利用內外層嵌套, 模擬, 相容所有瀏覽器, 相對於方法一比較麻煩, 使用時不能對滾動條聲明任何樣式

<!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>

登入後複製

推薦學習：css視頻教程

以上是css如何設定超出部分捲軸隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！