問題描述

<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里面有一段文字，我設(shè)置了overflow：auto；也就是超出部分顯示滾動(dòng)條，那么我如何修改這個(gè)滾動(dòng)條的樣式呢？

問題解答

一個(gè)針對(duì)Webkit內(nèi)核瀏覽器的滾動(dòng)條美化的例子，不知道是不是你想要的

/* 滾動(dòng)條部分 */::-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); }/* 手柄激活態(tài) */::-webkit-scrollbar-thumb:window-inactive { background: rgba(200,200,200,0.4); }回答2：

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

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

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