整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          「css」打造獨特風格的瀏覽器滾動條

          「css」打造獨特風格的瀏覽器滾動條

          網頁設計中,自定義瀏覽器滾動條是提升用戶體驗和美化界面的一項重要技巧。通過CSS的偽元素和屬性,我們能夠輕松地調整滾動條的樣式。以下是一些簡單的步驟,教你如何設置瀏覽器滾動條。

          滾動條

          首先,我們使用::-webkit-scrollbar偽元素來選擇Webkit內核瀏覽器(如Chrome、Safari)的滾動條。接著,我們通過width屬性調整滾動條的寬度,使其更符合設計需求。這一步驟非常關鍵,因為寬度的調整可以在一定程度上影響用戶的感知和交互。

          /* 設置滾動條的寬度 */
          ::-webkit-scrollbar {
             width: 5px;
          }

          軌道

          其次,使用::-webkit-scrollbar-track選擇滾動條的軌道部分,通過background屬性為軌道設置背景顏色。這有助于使滾動條在頁面中更加協調和統一。

          /* 滾動條軌道的樣式 */
          ::-webkit-scrollbar-track {
            background: #f1f1f1;
          }

          手柄

          接下來,使用::-webkit-scrollbar-thumb選擇滾動條的拖動手柄部分,通過background屬性設置手柄的背景顏色。這一步可以為滾動條增添一些獨特的個性,使其與整體設計風格更加契合。

          /* 滾動條手柄的樣式 */
          ::-webkit-scrollbar-thumb {
            background: #bec4c4;
          }

          手柄懸停

          最后,通過::-webkit-scrollbar-thumb:hover選擇手柄在懸停狀態時的樣式,通過調整background屬性,為用戶提供視覺反饋,增強交互體驗。

          ::-webkit-scrollbar-thumb:hover {
             background: #555;
          }

          通過以上步驟,你可以輕松定制出一個獨特且符合網站設計的瀏覽器滾動條。這種個性化的設計不僅能夠提升用戶對網站的印象,還能夠改善用戶在頁面上的滾動體驗。在實際應用中,根據網站的整體風格和需求,你還可以進一步調整滾動條的其他樣式屬性,以實現更加復雜和豐富的效果。

          ,改變瀏覽器默認的滾動條樣式

          ::-webkit-scrollbar-track-piece { //滾動條凹槽的顏色,還可以設置邊框屬性

          background-color:#f8f8f8;

          }

          ::-webkit-scrollbar {//滾動條的寬度

          width:9px;

          height:9px;

          }

          ::-webkit-scrollbar-thumb {//滾動條的設置

          background-color:#dddddd;

          background-clip:padding-box;

          min-height:28px;

          }

          ::-webkit-scrollbar-thumb:hover {

          background-color:#bbb;

          }

          二,給某個div .test1加滾動條樣式

          .test1::-webkit-scrollbar {

          width: 8px;

          }

          .test1::-webkit-scrollbar-track {

          background-color:red;

          -webkit-border-radius: 2em;

          -moz-border-radius: 2em;

          border-radius:2em;

          }

          .test1::-webkit-scrollbar-thumb {

          background-color:green;

          -webkit-border-radius: 2em;

          -moz-border-radius: 2em;

          border-radius:2em;

          }

          三,malihu

          malihu是一款高性能的滾動條美化jQuery插件。該滾動條美化插件支持水平和垂直滾動條,支持鼠標滾動,支持鍵盤滾動和支持移動觸摸屏。

          (1) 安裝:

          通過Bower或nmp來安裝該滾動條美化插件

          bower install malihu-custom-scrollbar-plugin

          npm install malihu-custom-scrollbar-plugin

          (2) 使用方法

          使用該滾動條美化插件需要引入jQuery和jquery.mCustomScrollbar.concat.min.js以及jquery.mCustomScrollbar.css文件。

          (3) 通過js來初始化

          (4) 通過HTML來初始化

          另外可以通過data-mcs-axis屬性來設置是水平還是垂直滾動條,取值為x或y。

          默認情況下該滾動條是垂直方向的滾動條,你可以通過配置參數將它設置為水平滾動條或兩個方向上滾動條。

          $(".content").mCustomScrollbar({

          axis:"x" // 水平滾動條

          });

          用場景

          ::-webkit-scrollbar 只支持WebKit的瀏覽器 (谷歌Chrome, 蘋果Safari)可以使用。

          全局樣式

          * {
            scrollbar-width: thin;
            // auto -瀏覽器默認滾動條寬度
            // thin -設置比默認滾動條更窄的寬度
            // none -隱藏滾動條,但是元素還可以滾動
            // **px -直接設置滾動條的寬度
          }
          
          // 垂直滾動條和水平滾動條相交的部分
          ::-webkit-scrollbar-corner {
            display: none;
            width: 0;
            height: 0;
          }
          
          // 整個滾動條
          ::-webkit-scrollbar {
            width: 5px; // 寬度
            height: 5px; // 高度
            background-color: #a7b1c2; // 顏色
          }
          
          // 滾動條上的滾動滑塊。
          ::-webkit-scrollbar-thumb {
            width: 6px;
            height: 6px;
            background: rgba(0, 0, 0, 0.1);
            background-clip: padding-box;
            border: 2px solid transparent;
            border-radius: 6px;
          }
          
          // 滾動條上的按鈕(上下箭頭)。
          ::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
          }
          
          // 滾動條軌道
          ::-webkit-scrollbar-track {
            display: none;
          }
          
          // 滾動條沒有滑塊的軌道部分。
          ::-webkit-scrollbar-track-piece {
            display: none;
          }
          
          // 右下角拖動塊(如:textarea的可拖動按鈕)
          ::-webkit-resizer {
            background: #991d28;
          }
          

          局部樣式


          主站蜘蛛池模板: 日本一区二区三区在线观看| 精品免费久久久久国产一区| 一区二区三区电影网| 精品人无码一区二区三区| 中文字幕精品一区| 精品久久一区二区| 久久精品一区二区影院 | 国产成人精品一区二区三区免费 | 日本一区二区三区免费高清| 亚洲一区二区三区电影| 人妻内射一区二区在线视频| 国产一区二区三区不卡在线看| 伊人色综合一区二区三区影院视频 | 一区高清大胆人体| 亚洲国产综合精品一区在线播放| 国产精品亚洲一区二区三区| 无人码一区二区三区视频| 一区二区无码免费视频网站| 老湿机一区午夜精品免费福利| 一区二区不卡久久精品| 成人毛片无码一区二区| 日本精品视频一区二区| 国产精品第一区第27页| 日韩精品无码人妻一区二区三区| 一区二区三区日本电影| 亚洲国产成人精品无码一区二区| 亚洲日本一区二区一本一道 | 国产精品视频一区二区三区无码| 国模私拍福利一区二区| 精品久久国产一区二区三区香蕉| 秋霞无码一区二区| 日韩动漫av在线播放一区| 精品日韩亚洲AV无码一区二区三区| 精品一区二区三区在线播放| 3d动漫精品一区视频在线观看| 亚洲一区日韩高清中文字幕亚洲| 无码国产精品一区二区免费式直播| 激情啪啪精品一区二区| 日本精品一区二区三区在线观看| 国产中文字幕一区| 一区一区三区产品乱码|