CSSで隠したい部分以上にスクロールバーを設定する方法-CSSチュートリアル-php.cn

CSSで隠したい部分以上にスクロールバーを設定する方法

醉折花枝作酒筹

リリース： 2021-04-09 18:17:54

オリジナル

4428 人が閲覧しました

方法: 1. 「-webkit-scrollbar」属性設定、構文「-webkit-scrollbar{display:none;}」を使用します; 2. 親要素に「overflow: hidden」スタイルを設定しますdiv、および親要素と子要素の幅を設定します。

このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

方法 1. css 3 -webkit-scrollbar の新機能を使用しますが、この方法は Firefox および 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>

ログイン後にコピー

と互換性がありません。方法 2 、内部ネストと外部ネストを利用する、シミュレーション、すべてのブラウザと互換性あり、方法 1 に比べて面倒、使用時にスクロールバーのスタイルを宣言できない

<!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 中国語 Web サイトの他の関連記事を参照してください。