如何實現網頁橫向滾動條美化

網頁設計中，滾動條是一個常用的元素。橫向滾動條的樣式能夠影響整個頁面的美觀度，因此，如何實現網頁橫向滾動條美化是一個非常重要的問題。本文將從多個方面進行詳細闡述。

一、網頁橫向滾動條設置

設置網頁橫向滾動條可以通過CSS的屬性來進行修改。一般而言，大部分網站設置的橫向滾動條樣式都是默認的，而如何對橫向滾動條進行美化是許多設計人員都需要深入思考的問題。

可以通過CSS中的overflow-x屬性來設置橫向滾動條，其中包括如下幾種不同的值：

visible：默認值，可以顯示超出範圍的內容，不會出現滾動條。
hidden：超出範圍的內容將不可見，同時也不會出現滾動條。
scroll：超出範圍的內容將會出現滾動條，即使不需要滾動條也會佔用頁面的空間。
auto：超出範圍的內容將會出現滾動條，只有在需要滾動時才會出現滾動條。

以scroll作為樣例，下面的代碼演示了如何設置網頁橫向滾動條，並通過CSS的相關屬性來進行美化。

<style>
  #scrollbar{
    overflow-x: scroll;
    height: 100px;
    white-space: nowrap;
  }
  #scrollbar::-webkit-scrollbar{
    width: 10px;
  }
  #scrollbar::-webkit-scrollbar-track{
    background-color: #f1f1f1;
  }
  #scrollbar::-webkit-scrollbar-thumb{
    background-color: #4CAF50;
    border-radius: 5px;
  }
</style>

<div id="scrollbar">
  <p>
    This is some text that will overflow the div element.
  </p>
  <p>
    This is some text that will overflow the div element.
  </p>
  <p>
    This is some text that will overflow the div element.
  </p>
</div>

上述代碼中，#scrollbar用於設置橫向滾動條的樣式，其中height屬性設置了滾動條的高度，white-space屬性設置了不換行，-webkit-scrollbar用於修改滾動條的樣式：

width設置滾動條的寬度；
background-color用於設置滾動條軌道的背景色；
border-radius用於設置滾動條的圓角。

二、網頁橫向滾動條怎麼出現

當網頁的內容超出了容器的範圍時，橫向滾動條就會自動出現。在默認情況下，即使橫向滾動條並不美觀，其還是能夠起到非常重要的作用。儘管如此，如何優化橫向滾動條的樣式，使得它成為網站設計中的亮點呢？

以前文代碼中的#scrollbar為例，當其中的文本超出了容器的範圍，橫向滾動條就會自動出現。此時，通過CSS的屬性來設置滾動條的樣式即可實現橫向滾動條美化。

三、網頁沒有橫向滾動條

有時候，即使網頁內容超出了容器的範圍，橫向滾動條還是不會自動出現。出現這種情況的原因很多，最常見的是一些容器屬性的問題。

請看下面的代碼：

<style>
  #container {
    width: 500px;
    height: 100px;
    overflow-x: hidden;
    white-space: nowrap;
  }
</style>

<div id="container">
  <p>
    This is some text that will overflow the div element.
  </p>
  <p>
    This is some text that will overflow the div element.
  </p>
  <p>
    This is some text that will overflow the div element.
  </p>
</div>

上述代碼中，#container用於設置容器的樣式，其中width屬性設置了容器寬度，height屬性設置了容器高度，overflow-x屬性設為hidden，white-space屬性設置了不換行。在此狀態下，即使文本超出了容器的範圍，橫向滾動條也不會出現。

要解決這個問題，需要將overflow-x屬性設為auto或scroll，即可使橫向滾動條出現。然後你可以通過前文所述方法來進行橫向滾動條的美化。

四、網頁不出現橫向滾動條

有時，你想在網頁上設置一個元素卻發現橫向滾動條卻始終不出現。這種情況通常出現在瀏覽器的窗口縮放和元素的寬度過大時。在此情況下，只需加一個min-width屬性即可讓橫向滾動條出現。

請看下面的代碼：

<style>
  #container {
    min-width: 800px;
    white-space: nowrap;
  }
</style>

<div id="container">
  <p>
    This is some text that will overflow the div element.
  </p>
  <p>
    This is some text that will overflow the div element.
  </p>
  <p>
    This is some text that will overflow the div element.
  </p>
</div>

在上述代碼中，#container設置了min-width屬性，當元素的寬度小於800px時，橫向滾動條就會出現。

五、CSS插件實現網頁橫向滾動條美化

除了使用CSS來進行橫向滾動條的美化，還可以使用CSS插件來進行優化。

一種常見的插件是Malihu的Custom Scrollbar插件。該插件允許你自定義滾動條，包括滾動條的尺寸、樣式和軌道大小。同時，還可以使用插件的各種選項來實現更高級的功能。

使用Custom Scrollbar插件的代碼如下：

<link rel="stylesheet" href="jquery.mCustomScrollbar.css">

<div id="scrollbar" class="custom-scrollbar">
  <p>
    This is some text that will overflow the div element.
  </p>
  <p>
    This is some text that will overflow the div element.
  </p>
  <p>
    This is some text that will overflow the div element.
  </p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

<script>
  $(document).ready(function () {
    $('#scrollbar').mCustomScrollbar({
      theme: 'minimal-dark',
      mouseWheel:{ preventDefault: true }
    });
  });
</script>

在上述代碼中，jquery.mCustomScrollbar.css和jquery.mCustomScrollbar.concat.min.js是Custom Scrollbar插件的CSS和JavaScript文件，#scrollbar是一個包含文本的div元素，.custom-scrollbar是自定義的滾動條樣式。

最後，通過mCustomScrollbar函數來為#scrollbar元素添加滾動條就可以實現橫向滾動條的美化了。

原創文章，作者：JAYQ，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/144833.html