CSS如何設定相容IE捲軸樣式的代碼圖文

來源:互聯網
上載者:User
廢話不多說,直接上demo,最下面有詳細注釋。

1、這是在webkit瀏覽器下顯示的樣式。

(個人比較喜歡簡約點的)

2、在IE瀏覽器下顯示的樣式(為了區分所以樣式寫的不一樣,我沒找到IE下設定捲軸寬高的方法)


下面是代碼:

<p id='scroll'><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瀏覽器捲軸樣式設定位置參考如

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.