CSS3 カスタムスクロールバースタイルを実装する方法-CSSチュートリアル-php.cn

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

不言

リリース： 2018-06-20 17:56:42

オリジナル

1764 人が閲覧しました

この記事では主に 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;
}

ログイン後にコピー

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

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