隨著網頁及行動裝置應用程式的發展，捲軸成為了一種不可或缺的使用者體驗，而CSS3 提供的一系列捲軸樣式設定使得我們可以更靈活地自訂捲軸的樣式，今天我們就來一起探討如何利用CSS來設定div捲軸。
一、基礎設定
我們在HTML中定義一個帶有內容的div，當內容超出div的大小時需要使用捲軸進行檢視。下面是一個基本的HTML結構：
<div class="wrapper"> <div class="content"> <p>这里是一些内容</p> <p>这里也是一些内容</p> <p>这里还是一些内容</p> </div> </div>
接著，我們來設定div 的基本樣式，可以添加如下樣式：
.wrapper {
width: 300px;
height: 200px;
overflow: auto; /* 滚动条设置 */
margin: 20px;
border: 1px solid #ccc;
padding: 10px;
}
.content {
width: 100%;
height: auto;
}透過給.wrapper 設定overflow: auto 屬性，使得在在捲軸隱藏的情況下，內容大小超過div大小時會出現捲軸，而不會向外展開並覆蓋其他元素。
二、捲軸基本設定
接下來，我們可以透過以下方式對捲軸的樣式進行進一步的自訂：
/* 滚动条整体样式 */
.wrapper::-webkit-scrollbar {
width: 5px;
height: 10px;
background-color: #f5f5f5;
}
/* 滚动条thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb {
width: 5px;
height: 10px;
background-color: #9a9a9a;
}
/* 滚动条hover状态下thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* 滚动条上下箭头样式 */
.wrapper::-webkit-scrollbar-button {
background-color: #ccc;
display: none;
}
/* 滚动条左右箭头样式 */
.wrapper::-webkit-scrollbar-button:start:decrement, .wrapper::-webkit-scrollbar-add-button {
display: none;
}
.wrapper::-webkit-scrollbar-button:end:increment, .wrapper::-webkit-scrollbar-sub-button {
display: none;
}程式碼解析：
::-webkit-scrollbar ：選擇所有捲軸元件。此樣式可以設定滾動條整體的寬度高度和背景色。 ::-webkit-scrollbar-thumb ：選擇滑桿。此樣式可以控制滑桿的寬度高度和背景色。 ::-webkit-scrollbar-thumb:hover ：選擇滑桿在hover狀態下的樣式。 ::-webkit-scrollbar-button ：選擇捲軸兩端的箭頭部分。此樣式用於控制上下左右箭頭的背景色和是否顯示。 ::-webkit-scrollbar-button:start:decrement 或::-webkit-scrollbar-sub-button ：選擇捲軸上箭頭(向上捲動)/左箭頭(向左滾動)部分，當滾動條是垂直/水平方向時使用。 ::-webkit-scrollbar-button:end:increment 或::-webkit-scrollbar-add-button ：選擇滾動條下箭頭(向下滾動)/右箭頭(向右滾動)部分，當捲軸是垂直/水平方向時使用。 三、自訂捲軸
我們可以根據需要，自訂捲軸的樣式，下面是一個自訂樣式的例子：
.wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #f5f5f5;
}
.wrapper::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #f5f5f5;
}
.wrapper::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #a0a0a0;
}
.wrapper::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
.wrapper::-webkit-scrollbar-corner {
background-color: #f5f5f5;
}程式碼解析：
::-webkit-scrollbar-track ：選擇捲軸的track 部分，是滑桿和捲動箭頭/捲動區域之間的區域，可以設定track的樣式，如背景顏色、邊框、圓角等，此範例中我們對其進行了圓角設定。 ::-webkit-scrollbar-thumb ：選擇滑桿的樣式，此範例中我們對其進行了圓角設置，並設置了滑桿的背景顏色以及hover狀態下背景顏色。 ::-webkit-scrollbar-corner ：設定捲軸的角落的顏色，通常我們把它設為與容器顏色相同。 四、總結
經過以上對滾動條的設置，我們可以根據實際需求選擇相應的樣式進行設置，這樣可以更好地體驗到網頁及行動裝置應用的交互體驗。同時要注意的是，上述範例主要適用於 Chrome 和 Safari 等一些 Webkit 核心的瀏覽器，如果要適應其他瀏覽器，則需要使用不同的樣式和屬性。
以上是css怎麼設定div捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章！
