CSS中怎樣設(shè)置滾動(dòng)條樣式

發(fā)布時(shí)間：2021-07-27 14:36:11 來(lái)源：億速云閱讀：207 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

今天就跟大家聊聊有關(guān)CSS中怎樣設(shè)置滾動(dòng)條樣式，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

設(shè)置滾動(dòng)條樣式的屬性

　　1.::-webkit-scrollbar滾動(dòng)條整體部分，其中的屬性:width,height,background,border等。

　　2.::-webkit-scrollbar-button滾動(dòng)條兩端的按鈕，可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。

　　3.::-webkit-scrollbar-track外層軌道?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。

　　4.::-webkit-scrollbar-track-piece內(nèi)層滾動(dòng)槽/軌道，需要注意的就是它會(huì)覆蓋第三個(gè)屬性的樣式。

　　5.::-webkit-scrollbar-thumb滾動(dòng)的滑塊

　　6.::-webkit-scrollbar-corner邊角，兩個(gè)滾動(dòng)條交匯處

　　7.::-webkit-resizer定義右下角拖動(dòng)塊的樣式/兩個(gè)滾動(dòng)條交匯處用于拖動(dòng)調(diào)整元素大小的小控件（基本用不上）

　　設(shè)置css滾動(dòng)條樣式代碼

　　<!Doctypehtml>

　　<html>

　　<head>

　　<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

　　<title>css滾動(dòng)條樣式</title>

　　<styletype="text/css">

　　.box{

　　width:600px;

　　height:400px;

　　margin:100pxauto;

　　border:1pxsolid#000;

　　border-right:0;

　　}

　　.main{

　　overflow-x:hidden;

　　overflow-y:auto;

　　color:#000;

　　font-size:16px;

　　height:100%;

　　}

　　.mainp{height:300px;}

　　/*-------滾動(dòng)條整體樣式----*/

　　.main::-webkit-scrollbar{

　　width:8px;

　　height:8px;

　　}

看完上述內(nèi)容，你們對(duì)CSS中怎樣設(shè)置滾動(dòng)條樣式有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡