前端頁面自定義滾動條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義滾動條</title>
<style type="text/css">
.nui-scroll {
margin-left: 100px;
border: 1px solid #000;
width: 200px;
height: 100px;
overflow: auto;
color: white;
background: #0d131a;
}
.nui-scroll::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*正常情況下滑塊的樣式*/
.nui-scroll::-webkit-scrollbar-thumb {
background-color: #1a9bd3;
border-radius: 10px;
height: 26px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*滑鼠懸浮在該類指向的控制元件上時滑塊的樣式*/
.nui-scroll:hover::-webkit-scrollbar-thumb {
background-color: #1a9bd3;
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*滑鼠懸浮在滑塊上時滑塊的樣式*/
.nui-scroll::-webkit-scrollbar-thumb:hover {
background-color: #1a9bd3;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*正常時候的主幹部分*/
.nui-scroll::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
background-color: #0d131a;
}
/*滑鼠懸浮在滾動條上的主幹部分*/
.nui-scroll::-webkit-scrollbar-track:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
background-color:#0d131a;
}
</style>
</head>
<body>
<div class="nui-scroll">
<ul class="vertical-list" id="layers">
<li>
zhangsan
</li>
<li>
zhangsan
</li>
<li>
zhangsan
</li>
<li>
zhangsan
</li>
<li>
zhangsan
</li><li>
zhangsan
</li>
<li>
zhangsan
</li>
<li>
zhangsan
</li>
<li>
zhangsan
</li>
<li>
zhangsan
</li>
<li>
zhangsan
</li>
<li>
zhangsan
</li>
<li>
zhangsan
</li>
</ul>
</div>
</body>
</html>
相關文章
- 自定義滾動條
- 【Flutter實戰】自定義滾動條Flutter
- JavaScript自定義滾動條詳解JavaScript
- 自定義瀏覽器滾動條樣式瀏覽器
- Vue.js 桌面端自定義滾動條元件|vue美化滾動條VScrollVue.js元件
- vue2.x自定義虛擬滾動條|vue美化滾動條元件VscrollVue元件
- 自定義滾動文字
- ios自定義類似網易新聞的滾動條iOS
- JavaWeb 自定義404頁面JavaWeb
- scroll-view元件bindscroll例項應用:自定義滾動條View元件
- 短視訊平臺搭建,自定義滾動條的樣式
- css3自定義滾動條樣式程式碼例項CSSS3
- vue 自定義指令實現,滾動條百分比進度條。Vue
- 使用 selenium (python),無法在頁面的 iframe 框架中實現對貌似是自定義滾動條進行滾動Python框架
- 頁面圖片自動滾動
- 自定義OAM錯誤頁面
- Swift - 自定義Share分享頁面Swift
- 前端高效能滾動 scroll 及頁面渲染優化前端優化
- 遮罩層禁止頁面滾動遮罩
- 禁止頁面滾動的方法
- 頁面滾動偵聽器
- 教你自定義Flutter錯誤頁面Flutter
- Appfuse:新增自定義頁面元件APP元件
- 自定義處理頁面請求
- 自定義登入和登出頁面
- ThinkPHP框架中自定義錯誤頁面和提示頁面PHP框架
- 頁面出現垂直滾動條導致跳動現象解決方案
- vue頁面有彈層,禁止頁面滾動Vue
- vue 監聽頁面滾動事件Vue事件
- Flutter SingleChildScrollView 滾動頁面FlutterView
- js頁面全屏垂直滾動效果JS
- js實現重新整理頁面依然能夠使滾動條滾定在原來位置JS
- DataTables自定義分頁條數實現
- XAF自定義啟動頁
- 移動端頁面滾動--解決方法
- 直播平臺製作,禁止頁面滾動 / 滾動事件穿透事件穿透
- react記錄頁面的滾動條位置React
- 網頁內容部分設滾動條網頁