1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル]スクロールバーを非表示にし、サンプルコードの内容をスクロールすることができますするCSS

2022-02-02 17:04:34

プリアンブル

ページのhtml構造が多くのボックスを入れ子にしている場合、複数の縦スクロールバーを含むページになってしまうことがあります。
これはページのスタイルに影響を与えるので、スクロールをサポートしながらスクロールバーを隠す必要があり、ここではcssを使用してそれを行う2つの方法を紹介します。

方法1:スクロールバーの幅を計算し、非表示にする

原理:外側のボックスと内側のボックスを子親相でレイアウトし、内側のボックスを右に17ピクセルずらすと、ちょうどスクロールバーの幅になる(手動でデバッグ)、この方法はChromeとIEで問題ないです。

コードは以下の通りです(例)。

.outer-container{
     width: 300px;
     height: 200px;
     border:1px solid black;
     overflow:hidden;
     position:relative;
}
.inner-container{
    position:absolute;
    /* The position of these four directions should be written in full, otherwise it will not take effect */
    top:0;
    left:0;
    bottom:0;
    right:-17px;
    overflow-y: scroll;
}

<div class="outer-container">
    <div class="inner-container">
        I am good accountant's interface and soon put into the restoration of health moment play space sent is the customer said the frame or will be as soon as possible ha plus velvet payment returned to will receive the goods payment to pay the phone bill as soon as possible or quick division space of the statement customer feedback good place customer feedback on good place technology health of the restoration of health of the reply customer said the aircraft customer loans to lose weight Kangshi carnival of the restoration of health of the reply width will happen frame of recovery fast pick up the phone feedback better hair certainly non-frame and third-party shipping reply reply soon to Hefei technology and third-party as soon as possible recovery tightly return vacation will separate to pay the phone bill will certainly separate to pay the phone bill stingy man separate to pay the phone bill golden phoenix will certainly separate to pay the phone bill customer opening prize number will certainly separate to pay the phone bill
    </div>
</div>

その効果は次の通りです。

方法2、CSSでスクロールバーを非表示にする

原理:scrollbar::-webkit-scrollbarのカスタム擬似オブジェクトセレクタ、しかしこのメソッドはIEと互換性がない、モバイルを行うことができます使用する。

コードは以下の通りです。

.wrapper{
	width: 300px;
	height: 200px;
	overflow:auto;
}
/*chrome and safari*/
.wrapper::-webkit-scrollbar { width: 0 !important }
/*IE 10+*/
.wrapper { -ms-overflow-style: none; }
/*Firefox*/
.wrapper { overflow: -moz-scrollbars-none; }

<div class="wrapper">
        <div> I am good accountant's interface and soon put into the restoration of health moment play space sent is the framework of the customer said or will be as soon as possible ha padded payment returned to will receive payment for goods as soon as possible to pay the phone bill or a quick division of the space of the statement of customer feedback good place customer feedback on good place technology health of the restoration of health of the reply to the customer said the aircraft customer loans to lose weight Convoy carnival recovery of healthy reply width will happen frame recovery fast pick up the phone feedback better hair certainly non-frame and third party shipping reply reply reply soon to Hefei technology and third party as soon as possible to recover tightly return vacation will separate to pay the phone bill will certainly separate to pay the phone bill stingy man separate to pay the phone bill gold phoenix will certainly separate to pay the phone bill customer lottery number will certainly separate to pay the phone bill </div >
</div>

その効果は次の通りです。

スクロールバーを非表示にし、コンテンツをスクロールすることができますCSSのこの記事は、これに導入され、隠されたスクロールバーの内容を達成するために、より関連するCSSは、以前の記事のスクリプトホームを検索したり、次の関連記事を閲覧し続け、私はあなたが将来的にはより多くのスクリプトホームをサポートして願っています!.