整合營銷服務商

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

          免費咨詢熱線:

          優雅而酷炫的自定義CSS滾動條

          優雅而酷炫的自定義CSS滾動條

          本文中,我們將深入了解滾動條的世界。我知道,這聽起來不太迷人,但相信我,精心設計的頁面與匹配的滾動條齊頭并進。老式的鍍鉻滾動條只是不適合那么多。

          我們將研究滾動條的細節,然后看看一些很酷的例子。

          滾動條的組成部分


          要設置滾動條的樣式,您需要熟悉滾動條的解剖結構。請看這張圖:

          這里要記住的兩個主要組成部分是:

          1. scrollbar track是滾動條下方的背景。
          2. scrollbar humb是用戶單擊和拖動的部分。

          我們可以使用供應商前綴::-webkit-scrollbar 選擇器更改完整滾動條的屬性。我們可以給滾動條一個固定的寬度、背景顏色、圓角......很多事情!如果我們自定義頁面的主滾動條,那么我們可以直接在 HTML 元素上使用 ::-webkit-scrollbar:

          html::-webkit-scrollbar {
            /* Style away! */
          }

          如果我們自定義一個滾動框,這是溢出的結果:滾動,那么我們可以在該元素上使用 ::-webkit-scrollbar:

          .element::-webkit-scrollbar {
            /* Style away! */
          }

          下面是一個快速示例,它設置 HTML 元素滾動條的樣式,使其寬,背景為紅色:

          如果我們只想更改滾動條的thumb或track怎么辦?你猜對了——我們分別為這兩個元素提供了特殊的前綴偽元素:::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track。以下是我們將所有這些東西放在一起時可能實現的想法:

          向您展示三個度的自定義滾動條樣式,然后打開一個從網絡上提取示例的大型展示,以獲取靈感。

          簡單而優雅的滾動條

          自定義滾動條仍然可以是最小的。我整理了一組示例,這些示例巧妙地改變了外觀,無論是對拇指或軌道進行輕微的顏色更改,還是對背景進行一些淺色造型。

          如您所見,在滾動條樣式方面,我們不必發瘋。有時,只需進行細微的更改即可通過與整體主題匹配的滾動條來增強整體用戶體驗.

          html::-webkit-scrollbar{
            width: 50px;
            background:red;
          }
          

          如果我們只想更改滾動條的拇指或軌道怎么辦?你猜對了——我們分別為這兩個元素提供了特殊的前綴偽元素:::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track。以下是我們將所有這些東西放在一起時可能實現的想法:

          html::-webkit-scrollbar {
            width: 30px;
          }
           
          html::-webkit-scrollbar-track {
            background: black;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
          }
           
          html::-webkit-scrollbar-thumb {
            background: red;
            border: 3px solid blue;
          }

          向您展示三個度的自定義滾動條樣式,然后打開一個從網絡上提取示例的大型展示,以獲取靈感。

          簡單而優雅的滾動條

          自定義滾動條仍然可以是最小的。我整理了一組示例,這些示例巧妙地改變了外觀,無論是對拇指或軌道進行輕微的顏色更改,還是對背景進行一些淺色造型。

          .container {
                      display: flex;
                      margin: 50px;
                      column-gap: 20px;
                  }
                  
                  .scrollbar {
                      height: 300px;
                      width: 50%;
                      overflow: auto;
                      padding: 0 10px;
                  }
                  /*       ScrollBar 1        */
                  
                  #scrollbar1::-webkit-scrollbar {
                      width: 10px;
                  }
                  
                  #scrollbar1::-webkit-scrollbar-track {
                      border-radius: 8px;
                      background-color: #e7e7e7;
                      border: 1px solid #cacaca;
                  }
                  
                  #scrollbar1::-webkit-scrollbar-thumb {
                      border-radius: 8px;
                      background-color: #d55959;
                  }
                  /*       ScrollBar 2        */
                  
                  #scrollbar2::-webkit-scrollbar {
                      width: 12px;
                  }
                  
                  #scrollbar2::-webkit-scrollbar-track {
                      border-radius: 8px;
                      background-color: #e7e7e7;
                      border: 1px solid #cacaca;
                      box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
                  }
                  
                  #scrollbar2::-webkit-scrollbar-thumb {
                      border-radius: 8px;
                      background-color: #363636;
                  }
                  /*        ScrollBar 3    */
                  
                  #scrollbar3::-webkit-scrollbar {
                      width: 12px;
                  }
                  
                  #scrollbar3::-webkit-scrollbar-track {
                      background-color: #e7e7e7;
                      border: 1px solid #cacaca;
                  }
                  
                  #scrollbar3::-webkit-scrollbar-thumb {
                      background-color: #060b9a;
                  }
                  /*        ScrollBar 4    */
                  
                  #scrollbar4::-webkit-scrollbar {
                      width: 12px;
                  }
                  
                  #scrollbar4::-webkit-scrollbar-track {
                      background-color: transparent;
                      border: 1.5px solid #7e7e7e;
                      border-radius: 8px;
                  }
                  
                  #scrollbar4::-webkit-scrollbar-thumb {
                      background-color: #f1f1f1;
                      border: 2px solid #616161;
                      border-radius: 8px;
                  }
                  /*        ScrollBar 5    */
                  
                  #scrollbar5::-webkit-scrollbar {
                      background-color: #000;
                      width: 12px;
                      border-radius: 10px;
                  }
                  
                  #scrollbar5::-webkit-scrollbar-track {
                      border-radius: 10px;
                      box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
                  }
                  
                  #scrollbar5::-webkit-scrollbar-thumb {
                      background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));
                      border-radius: 10px;
                  }
                  /*       ScrollBar 6        */
                  
                  #scrollbar6::-webkit-scrollbar {
                      width: 12px;
                  }
                  
                  #scrollbar6::-webkit-scrollbar-track {
                      border-radius: 8px;
                      background-color: #95a5a6;
                      border: 1px solid #cacaca;
                  }
                  
                  #scrollbar6::-webkit-scrollbar-thumb {
                      border-radius: 8px;
                      background-color: #2c3e50;
                  }

          如您所見,在滾動條樣式方面,我們不必發瘋。有時,只需進行細微的更改即可通過與整體主題匹配的滾動條來增強整體用戶體驗。

          看個錨點定位的例子

          發現頁面唰的一些就到頂部了,快到我們懵逼了。。。

          開始解決

          scroll-behavior

          CSS屬性 scroll-behavior 為一個滾動框指定滾動行為,其他任何的滾動,例如那些由于用戶行為而產生的滾動,不受這個屬性的影響。在根元素中指定這個屬性時,它反而適用于視窗。

          scroll-behavior:smooth 寫在滾動容器元素上,可以讓容器的滾動變得平滑。

          在網頁默認滾動是在<html>標簽上,移動端大多數在<body>標簽上。

          我們可以這樣加:

          html, 
          body { scroll-behavior:smooth; }
          

          加了以后的效果如下:

          這是錄制的GIF圖,效果沒那么好。 大家可以動手試一下,滑動體驗非常不錯。

          缺點

          兼容性不夠好

          當然我們可以通過js來做個類似

          Element.scrollIntoView() 方法

          DOM元素的scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內,通過觸發滾動容器的定位實現。

          DOM元素的scrollIntoView()方法 是原生JS 兼容到IE6,兼容性非常好。

          參數如下

          {
           behavior: "auto" | "instant" | "smooth", // 默認 auto
           block: "start" | "center" | "end" | "nearest", // 默認 center
           inline: "start" | "center" | "end" | "nearest", // 默認 nearest
          }
          

          解釋一下這三個參數:

          1. behavior 表示滾動方式。auto 表示使用當前元素的 scroll-behavior 樣式。instant 和 smooth 表示 直接滾到底 和 使用平滑滾動。
          2. block 表示塊級元素排列方向要滾動到的位置。對于默認的 writing-mode: horizontal-tb 來說,就是豎直方向。start 表示將視口的頂部和元素頂部對齊;center 表示將視口的中間和元素的中間對齊;end 表示將視口的底部和元素底部對齊;nearest 表示就近對齊。
          3. inline 表示行內元素排列方向要滾動到的位置。對于默認的 writing-mode: horizontal-tb 來說,就是水平方向。其值與 block 類似。

          用法:

          html:

          <div class="wrap">
           <div onClick="onScrollIntoView()">點擊讓黑色塊到頂部</div>
           <ul class="body">
           <li>1</li>
           <li>2</li>
           <li id="box">我是黑色</li>
           <li>3</li>
           <li>4</li>
           </ul>
          </div>
          

          js:

          function onScrollIntoView () {
           var element=document.getElementById("box");
           element.scrollIntoView({behavior: "smooth"});
          }
          

          效果:

          這回大家再也不用害怕做錨點定位啦。

          最后我們在說一個關于頁面滾動問題吧,那就是 返回頂部 功能實現

          返回頂部 功能實現

          我們常用定時器 setInterval 來不斷減去高度。

          如:當前距離頂部 1000, 我們每10毫秒減50,

          var timer=setInterval(function() { // 定時器 每10毫秒執行一次
           // 頂部距離 document.body.scrollTop=1000 
           var speed=50 // 返回頂部速度 
           document.body.scrollTop=document.body.scrollTop - speed
           if (document.body.scrollTop===0) { // 返回到達頂部后, 銷毀定時器
           clearInterval(timer)
           }
          }, 10)
          

          效果:

          大家會發現,頁面返回是滾動起來很干。 沒10毫秒減50. 很平均,在交互上效果并不好。

          借鑒上面 scroll-behavior:smooth 的交互效果。 緩動的返回頂部。

          改一下計算方式:1000/2=500, 500/2=250, 250/2=...... 這樣滑動起來是不是就平滑了呢?

          換算成公式:開始位置=開始位置 + (結束位置 - 開始位置) / 速度

          document.body.scrollTop=1000 + (0 - 1000) / 2

          公式太煩了還是上代碼吧:

          var onTop=function (a, b, c, d) {
           if (a==b || typeof a !='number') {
           return
           }
           b=b || 0
           c=c || 2
           
           var speed=function () {
           a=a + (b - b) / c
           
           if (a < 1) {
           d(b, true)
           return
           }
           d(a, false)
           requestAnimationFrame(speed)
           }
           speed()
          }
          
          • a 開始位置
          • b 結束位置
          • c 速度
          • d 位置回調,d(當前的位置值, 否動畫結束)


          調用:

          var target=document.body.scrollTop ? document.body : document.documentElement
          onTop(target.scrollTop, 0, 4, function (value) {
           target.scrollTop=value
          })
          

          效果:

          Ps: gif錄制效果不好,大家可以動手寫一下DEMO

          裝GoFullPage之類的截圖插件也可以實現滾動截圖,不過插件的截圖效率肯定不如瀏覽器自帶的工具,而且安裝插件對于瀏覽器的內存占用,網頁加載等多少會有點影響。

          那么不安裝插件,Chrome瀏覽器如何實現滾動截圖?

          以前Chrome網頁滾動截圖可以用開發者工具里的Capture full size screenshot命令,而現在這個命令搜不到了。

          實際上新版本的Chrome把這個截圖命令移到了可視化界面中,并且現在可以設置快捷鍵,使用起來比之前更方便。

          首先還是打開開發者工具,然后找到“設置”;

          在設置窗口的左側導航最下邊找到“快捷鍵”,右側往下翻,找到“屏幕截圖”,這里就可以對4中截圖命令設置快捷鍵。

          使用的時候,還是要先打開開發者工具這個窗口,然后用設置好的快捷鍵快速實現網頁滾動截圖。

          Chrome瀏覽器開發者工具是一款非常強大且易于使用的前端開發工具。其優點包括但不限于以下幾點:

          實時編輯:可以直接在瀏覽器中編輯HTML、CSS和JavaScript代碼,并且頁面可以實時更新。

          調試JavaScript代碼:提供了豐富的調試工具,比如斷點、監控變量、堆棧跟蹤等,方便我們快速定位和解決JavaScript代碼問題。

          查看元素:您可以輕松查看元素的樣式、盒模型、事件等。您可以快速了解頁面結構,還可以修改樣式以達到設計效果。

          網絡分析:提供網絡面板,方便查看網絡請求、響應狀態碼、傳輸大小等信息,以及網絡請求的時間線圖表。

          性能分析:提供性能面板,可以幫助我們分析頁面加載性能、資源優化建議等,幫助我們提高頁面性能。


          主站蜘蛛池模板: 精品视频一区二区三区免费 | 亚洲宅男精品一区在线观看| 亚洲国产精品一区第二页| 午夜影院一区二区| 国产成人高清精品一区二区三区 | 日韩精品一区二区三区中文字幕| 人妻AV中文字幕一区二区三区| 精品不卡一区中文字幕| 亚洲影视一区二区| 亚洲V无码一区二区三区四区观看| 国产三级一区二区三区| 日本一区二区三区爆乳| 日本一区二区在线| 人妻免费一区二区三区最新| 日韩精品电影一区亚洲| 国产日韩精品一区二区三区 | 亚洲福利精品一区二区三区| 中文无码一区二区不卡αv| 亚洲V无码一区二区三区四区观看 亚洲爆乳精品无码一区二区三区 亚洲爆乳无码一区二区三区 | 国产成人久久一区二区不卡三区 | 国产一区风间由美在线观看| 亚洲码一区二区三区| 亚洲日本精品一区二区| 国产伦精品一区二区三区| 国产激情一区二区三区 | 一区二区三区波多野结衣| 国产在线观看精品一区二区三区91| 日本片免费观看一区二区| 91午夜精品亚洲一区二区三区| 久久99精品波多结衣一区| 亚洲国产一区在线| 国产精品丝袜一区二区三区 | 久久精品一区二区国产| 久久婷婷色综合一区二区| 精品国产一区二区三区AV性色 | 国产精品亚洲一区二区无码| 国产精品一区二区毛卡片| 精品国产一区二区三区久久影院 | 中文激情在线一区二区| 综合无码一区二区三区四区五区| 精品人妻AV一区二区三区|