CSS3 カスタム スクロール バー スタイルを実装する方法

この記事では主に CSS3 のカスタム スクロール バー スタイルのサンプル コードを紹介します。内容が非常に優れているので、参考として共有します。

スクロール バーは非常に一般的なものですが、一部のブラウザに付属するスクロール バーは実際にはあまり見栄えがよくありません。カスタム スクロール バーの実装について検討するための研究として以下を使用できます。美しくなってください。ただし、Webkit Core を搭載したブラウザのみなので、楽しむためにしかプレイできません。

オーバーフローの概要

定義: overflow 属性は、ブロックレベルのコンテナーからオーバーフローしたときにコンテンツをクリップするか、スクロール バーをレンダリングするか、コンテンツを表示するかを指定します。

属性値

overflow:visible    //默认值。内容不会被修剪，超出内容会显示在元素框之外
overflow:hidden     //内容会被修剪。超出内容被隐藏
overflow:scroll     //内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow:auto       //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit     //规定从该父元素继承overflow属性的值

注: Internet Explorer のどのバージョン (IE8 を含む) も、属性値 "inherit" をサポートしていません。

オーバーフローがデフォルト値 (可視) 以外の値に設定されている場合、ブロックレベルのコンテキスト (フロートをクリアする方法) が作成されます。詳細については、「BFC とマージン コラプスの詳細な理解」を参照してください。

ちょっとしたヒント

現在のテキスト行の余分な部分を処理するには、次の属性を使用できます。 (同時に、要素の幅の値、overflow:hidden;、white-space:nowrap; も設定する必要があります。)

text-overflow:clip       //修剪文本。
text-overflow:ellipsis   //显示省略符号来代表被修剪的文本。
text-overflow:string     //使用给定的字符串来代表被修剪的文本。

複数行のテキストの場合は、非標準のattribute-webkit-line-clamp、ここでは詳細には触れません。

水平スクロールバーと垂直スクロールバー

を使用して水平スクロールバーと垂直スクロールバーをそれぞれ設定します。

overflow-x 和 overflow-y

カスタム スクロール バーの実装

この部分は、疑似クラスを使用してスクロール バーのデフォルトのスタイルを変更するブラウザ用です:

スクロール バー コンポーネント

1。 :-webkit -scrollbar スクロール バー全体 ::-webkit-scrollbar-thumb スクロール バー内の小さな四角は上下 (または左右) に移動できます ::-webkit-scrollbar -track スクロール バー トラック (中に親指が入っています)

4. ::-webkit-scrollbar-button スクロール バー トラックの両端にあるボタンをクリックすると、小さな四角形の位置を微調整できます。 E5 .: -WEBKIT-SCROLL-TRACK-PIECE 内側の軌道、スクロール バーの中央部分

6 .: -WEBKIT-SCROLLLBAR-コーナー コーナー、つまり、垂直スクロール バーが水平スクロール バーと交差する場所
7 .:::::: -Webkit-Resizer の 2 つのローリング バーは、要素のサイズをドラッグして調整するために使用されます

<p class="box box7">
    <p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
        scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。
    </p>
</p>


.box8::-webkit-scrollbar {
    width: 12px;
    background-color: #eee;
}

.box8::-webkit-scrollbar-track {
    background-color: #eee;
}

.box8::-webkit-scrollbar-thumb {
    background: #3DB6A4;
}

.box8::-webkit-scrollbar-button:start {
    background: url(./imgs/up.png) no-repeat;
    background-size: 12px 12px;
}

.box8::-webkit-scrollbar-button:end {
    background: url(./imgs/down.png) no-repeat;
    background-size: 12px 12px;
}

その他の効果は以下のとおりです:

それだけであることに注意してください。クロムでも動作します！ ！ ！ ！ ！ ！

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3の@font faceルールの分析について

CSSを使用してマウスホバー時にマスクレイヤーを実装する方法

以上がCSS3 カスタム スクロール バー スタイルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。