CSSを使用してIEスクロールバースタイルと互換性のあるコードグラフィックとテキストを設定する方法

黄舟
リリース: 2017-07-21 14:27:05
オリジナル
5295 人が閲覧しました

早速、デモに進みましょう。詳細なメモは下部にあります。

1. これは Webkit ブラウザーで表示されるスタイルです。简 喜欢 喜欢 (個人的にはシンプルなものが好みです)

2、IE ブラウザーで表示されるスタイル (区別するために、スタイルは同じではありません。IE でローリング バーを設定する方法が見つかりませんでした)

<br/>
ログイン後にコピー
以下はコードです:

<p id=&#39;scroll&#39;>
	<p >
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ex quia ab aliquid facere architecto culpa dolorum fugit corrupti harum accusantium quisquam inventore et magnam itaque minima hic! Impedit error.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt quia ipsam totam tenetur maxime repellendus possimus debitis molestiae velit vel fugiat ullam excepturi est quisquam quo fugit culpa amet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur facilis ipsam iste repellat sint numquam explicabo voluptatum voluptate corporis fugit adipisci qui exercitationem corrupti debitis tempore omnis maxime at quidem!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto voluptatem dolores ab dolorem est itaque ut sit deserunt qui laudantium eaque vitae perspiciatis amet quasi unde inventore dolor quis. Natus!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quia doloremque blanditiis quas unde nostrum a voluptatibus quam perspiciatis non quaerat enim neque quos rerum quo dolor expedita error deserunt!</p>
        </p>
</p>
ログイン後にコピー
#scroll{
        width:200px;
        height:200px;
        overflow:auto;
		margin-bottom: 20px;
	}
	#scroll p{
			width:400px;
			height:400px;
	}
	#scroll::-webkit-scrollbar{/*滚动条整体部分,其中的属性有width,height,background,border等(就和一个块级元素一样)(位置1)*/
			width:10px;
			height:10px;
	}
	#scroll::-webkit-scrollbar-button{/*滚动条两端的按钮,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果(位置2)*/
			background:#74D334;
	}
	#scroll::-webkit-scrollbar-track{/*外层轨道,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果(位置3)*/
			background:#FF66D5;
	}
	#scroll::-webkit-scrollbar-track-piece{/*内层轨道,滚动条中间部分(位置4)*/
			background:#FF66D5;
	}
	#scroll::-webkit-scrollbar-thumb{/*滚动条里面可以拖动的那部分(位置5)*/
		background:#FFA711;
		border-radius:4px;
	}
	#scroll::-webkit-scrollbar-corner {/*边角(位置6)*/
		background:#82AFFF; 
	}
	#scroll::-webkit-scrollbar-resizer  {/*定义右下角拖动块的样式(位置7)*/
		background:#FF0BEE;
	}
	#scroll{
		scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/ 
		scrollbar-face-color: #333; /**//*立体滚动条的颜色*/ 
		scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/ 
		scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/ 
		scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/ 
		scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/ 
		scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/ 
		scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/ 
	}
ログイン後にコピー

簡易バージョン(IEスタイルを直接デフォルト設定可能)

#scroll-2{
        width:200px;
        height:200px;
        overflow:auto;
		margin-bottom: 20px;
	}
	#scroll-2 p{
			width:400px;
			height:400px;
	}
	#scroll-2::-webkit-scrollbar{
			width:4px;
			height:4px;
	}
	#scroll-2::-webkit-scrollbar-track{
			background: #E6E6E6;
	}
	#scroll-2::-webkit-scrollbar-thumb{
		background: #747474;
		border-radius:2px;
	}
	#scroll-2::-webkit-scrollbar-corner{
		background: #E6E6E6;
	}
ログイン後にコピー

Webkitブラウザのスクロールバースタイル設定位置の参照は次のとおりです:

IEブラウザのスクロールバースタイル設定位置の参照は次のようになります。以下



以上がCSSを使用してIEスクロールバースタイルと互換性のあるコードグラフィックとテキストを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート