ブートストラップでスクロールバーを実装する方法

実装方法: 1. "

<div class="pre-scrollable">" 組版クラスを使用してスクロール バーを実装します。 2. "

" はスクロール バーを実装します。

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

スクロール バーを実装する方法bootstrap

1: ブートストラップ スタイルを追加してスクロール バーを追加します

実際には、関連するモジュールの class 属性に pre-scrollable を追加するだけです。

たとえば、

に事前スクロール可能を追加します:

<div class="pre-scrollable">

2: overflow を設定してスクロール バーを追加します

<div style=" overflow:scroll; width:400px; height:400px;”></div>

幅と高さを設定する必要があることに注意してください。設定しないと機能しません。ただし、それを超えていない場合は、下にスクロール バーが表示されるため、これは最良の選択ではありません。 ##

<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>

幅と高さを設定する必要があることに注意してください。設定しないと機能しません。さらに良い点は、幅と高さが超えない場合、単なる線になることです。

# 3: div のオーバーフロー属性を auto として直接指定するだけですが、次のように div の高さを指定する必要があります:

<div style="position:absolute; height:400px; overflow:auto"></div>

水平スクロール バーを表示したい場合は、overflow-x:auto

同様に、垂直スクロール バーは次のようになります。overflow-y:auto

div が他のオブジェクトに含まれている場合td などの場合、位置は相対に設定できます:position:relative

3: スクロール バーを非表示

{overflow: hidden ! important;} または {overflow-x: hidden; overflow- y: hidden;} は、x 軸または y 軸のスクロール バーをそれぞれ非表示にできます

関連する推奨事項:

ブートストラップ チュートリアル