CSS中的鼠標上下滾動操作，在移動設備和桌面端都常見。鼠標滾動可以讓網頁擁有更好的互動性和可操作性, 本文將介紹如何利用CSS在網頁中添加鼠標上下滾動事件。

/*在CSS中添加鼠標滾動事件*/
body {
scrollbar-color: yellow green;  /*滾動條顏色*/
scrollbar-width: thin;         /*滾動條寬度*/
}
/*添加鼠標上下滾動事件*/
body::-webkit-scrollbar-thumb:vertical {
background-color: green;       /*滾動條拇指顏色*/
}
body::-webkit-scrollbar-track:vertical {
background-color: yellow;      /*滾動條背景顏色*/
}

在上面的代碼中，我們使用scrollbar-color來控制滾動條的顏色，利用scrollbar-width來設置滾動條的寬度。同時，通過選擇器body::-webkit-scrollbar-thumb:vertical和body::-webkit-scrollbar-track:vertical來為垂直方向添加滾動條和背景顏色。

如果你想為頁面中的特定元素添加鼠標滾動事件，可以使用scroll屬性。scroll屬性允許我們控制滾動條的可見性，在鼠標滾動時對頁面進行滾動。

/*添加鼠標滾動事件*/
.scroll {
overflow: scroll;  /*滾動元素的可滾動區域*/
overflow-x: hidden; /*禁用水平滾動條*/
}

在上面的代碼中，我們為類名為scroll的元素添加了鼠標滾動事件。通過設置overflow屬性為scroll，我們可以設置該元素的滾動區域，overflow-x屬性是用來控制水平滾動條是否顯示。這樣我們可以很容易地在頁面中添加鼠標上下滾動事件了。