問題描述

<p id=’p3’ style=’width:200px;height:200px;overflow:auto;’>This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text. </p>

就像上面代碼 p里面有一段文字，我設置了overflow：auto；也就是超出部分顯示滾動條，那么我如何修改這個滾動條的樣式呢？

問題解答

一個針對Webkit內核瀏覽器的滾動條美化的例子，不知道是不是你想要的

/* 滾動條部分 */::-webkit-scrollbar { width:15px;}/* 軌道 */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 15px; border-radius: 15px;}/* 手柄 */::-webkit-scrollbar-thumb { -webkit-border-radius: 15px; border-radius: 15px; background:rgba(200,200,200,0.7); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }/* 手柄激活態 */::-webkit-scrollbar-thumb:window-inactive { background: rgba(200,200,200,0.4); }回答2：

那就定義瀏覽器滾動條樣式即可,兩者是一致的,如果需要不一樣,那就需要模擬滾動條

推薦你參考這篇文章：http://www.qianduan.net/css-custom-scroll-bar-style/作者是微信團隊的神飛，寫的文章一直很不錯！

話說滾動更改滾動條樣式。為什么pc端可以正常顯示。手機端就不行了呢