在設計網頁時，橫向滾動條是一個非常實用的工具，可以讓用戶在瀏覽一些寬度過大的網頁時，方便地進行水平滾動。但是，如果滾動條樣式不美觀或者功能不夠實用，則會影響用戶的使用體驗。那麼，如何為網頁中的橫向滾動條添加美觀、實用的功能呢？下面就從以下幾個方面對此進行詳細闡述。
一、選取適合的滾動條插件
在網頁中添加滾動條，可以使用一些開源的滾動條插件，這些插件往往提供豐富的功能設置和樣式屬性，可以實現最佳的用戶體驗。下面介紹兩個常用的插件。
1. iScroll
iScroll是一款輕量級的JavaScript插件，可以實現平滑滾動、橫向滾動和縱向滾動。它提供了多種滑動模式，設置容器滾動方向和速度，可以快速實現美觀、功能強大的橫向滾動條。
使用步驟：
1. 引入iScroll的核心js文件
<script src="iscroll.js"></script>2. 創建一個div容器，並設置寬度，以及需要滾動的內容。
<div id="myScroll" style="width: 100%;overflow: hidden;">
<div style="width: 400px">需要滾動的內容</div>
</div>3. 實例化iScroll對象，並指定需要滾動的容器
<script>
var myScroll = new iScroll("myScroll");
</script>然後，就可以看到iScroll創建的滾動條了，在iScroll的配置參數中可以設置滾動條的顏色和寬度。
2. perfect-scrollbar
perfect-scrollbar是一款特別易於使用的滾動條插件，它提供基於jQuery的API接口，可以實現平滑滾動、橫向滾動和縱向滾動。使用此插件，需要先引入它的js和css文件。
使用步驟：
1. 引入perfect-scrollbar的css和js文件
<link rel="stylesheet" href="jquery.perfect-scrollbar.min.css" />
<script src="jquery.min.js"></script>
<script src="jquery.perfect-scrollbar.min.js"></script>2. 創建一個div容器，設置寬度，以及需要滾動的內容
<div id="myScroll" style="width: 100%;overflow-x: auto;">
<div style="width: 400px">需要滾動的內容</div>
</div>3. 實例化perfectScrollbar對象，並指定需要滾動的容器
<script>
$(document).ready(function() {
$('#myScroll').perfectScrollbar();
});
</script>和iScroll一樣，可以在perfect-scrollbar的配置參數中設置滾動條的顏色和寬度。
二、美化滾動條樣式
對於網頁中自帶的滾動條，樣式通常比較單調，而且網頁的整體風格不同，需要的滾動條樣式也不一樣，因此，美化滾動條的樣式就變得非常重要。可以通過CSS來控制滾動條的樣式，例如下面的例子就可以自定義滾動條的顏色和寬度。
<style>
/*滾動條整體樣式*/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
border-radius: 6px;
}
/*滾動條滑塊樣式*/
::-webkit-scrollbar-track {
background-color: #ececec;
}
::-webkit-scrollbar-thumb:hover {
background-color: #b9b9b9;
}
::-webkit-scrollbar-thumb:active {
background-color: #7b7b7b;
}
</style>其中，`::-webkit-scrollbar`是指定整個滾動條的樣式，`::-webkit-scrollbar-thumb`是指定滾動條滑塊的樣式，`::-webkit-scrollbar-track`是指定滾動條滑道的樣式。還可以為不同狀態的滾動條設置不同的樣式，例如在hover和active狀態下的樣式。
三、實用的滾動條功能
除了樣式美觀，滾動條的實用功能也非常重要。以下列出幾個常用的功能及其實現方法。
1. 滾動條自動隱藏
當網頁內容較多，需要滾動條時，滾動條默認會一直顯示，但是這會佔用部分屏幕空間，影響用戶體驗。因此，可以設置滾動條自動隱藏，在需要滾動時才顯示出來。
<style>
/*滾動條自動隱藏*/
::-webkit-scrollbar {
width: 12px;
display: none;
}
#content {
overflow:hidden;
}
#content:hover::-webkit-scrollbar {
display: block;
}
#content:hover::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
}
#content:hover::-webkit-scrollbar-track {
background-color: #ececec;
}
</style>
<div id="content">
/* 網頁內容 */
</div>上面的代碼可以實現滾動條自動隱藏和鼠標懸浮時顯示的效果，可以提高用戶體驗。
2. 滾動條回到頂部
當網頁內容較多，用戶需要滾很長時間才能到達網頁頂部，這時可以在滾動條頂部添加一個回到頂部的按鈕，實現快速返回頂部的功能。
<style>
/*後面 style 是為了設置回到頂部的按鈕*/
#go-top {
position: fixed;
bottom: 24px;
right: 24px;
display: none;
cursor: pointer;
transition: opacity 0.2s ease-in-out;
}
#go-top.show {
opacity: 1;
display: block;
}
#go-top:hover {
opacity: 0.7;
}
#go-top .iconfont {
font-size: 24px;
}
</style>
<div id="content">
/* 網頁內容 */
</div>
<div id="go-top">
<i class="iconfont icon-chevron-up"></i>
</div>
<script>
var goTop = document.getElementById('go-top');
var scrollTop;
window.onscroll = function() {
scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 獲取滾動條位置
if (scrollTop >= 600) {
goTop.classList.add('show'); // 添加一個show類名，控制顯示
} else {
goTop.classList.remove('show'); // 移除show類名，控制隱藏
}
};
goTop.onclick = function() {
window.scrollTo({
top: 0,
behavior: "smooth"
}); // 平滑回到頁面頂部
};
</script>上面的代碼實現了一個回到頂部的按鈕，其中`#go-top`是一個固定定位的元素，當滾動條位置大於等於600時，添加`show`類名，顯示回到頂部的按鈕。點擊按鈕時，使用`window.scrollTo()`方法實現平滑回到頁面頂部的效果。
3. 滾動條與鼠標滾動速度聯動
可以通過jQuery的mousewheel事件來實現滾動條與鼠標滾動速度聯動，使得用戶滑動鼠標滾輪時，滾動條也進行相應的滾動。
<style>
/*自定義滾動條樣式*/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
border-radius: 6px;
}
::-webkit-scrollbar-track {
background-color: #ececec;
}
</style>
<div id="content">
/* 網頁內容 */
</div>
<script src="jquery.min.js"></script>
<script>
var scrollWidth = $('#content').prop('scrollWidth'); // 獲取內容寬度
var maxWidth = scrollWidth - $('#content').width(); // 獲取橫向滾動條可以滾動的最大距離
var $scrollBar = $('#content::-webkit-scrollbar-thumb'); // 獲取滾動條
$('#content').on('mousewheel', function(e) {
var scrollLeft = $('#content').scrollLeft(); // 獲取當前滾動條位置
var delta = e.originalEvent.wheelDelta; // 獲取鼠標滾動速度
if (delta > 0) { // 鼠標向上滾動
$('#content').scrollLeft(scrollLeft - 50); // 滾動條向左移動
$scrollBar.css('left', scrollLeft / maxWidth * 100 + '%'); // 讓滾動條位置與內容位置聯動
} else { // 鼠標向下滾動
$('#content').scrollLeft(scrollLeft + 50);
$scrollBar.css('left', scrollLeft / maxWidth * 100 + '%');
}
});
</script>上面的代碼中，使用`scrollWidth`屬性獲取當前內容的寬度，`maxWidth`用於計算橫向滾動條可以滾動的最大距離。當鼠標滾動時，根據鼠標滾動速度和當前滾動條位置的變化，滾動條的位置也進行重新定位，實現聯動效果。
總結
通過以上幾個方面的闡述，相信大家已經掌握了如何為網頁中的橫向滾動條添加美觀、實用的功能了。其中，選擇合適的滾動條插件、美化滾動條樣式、實用的滾動條功能是實現這個目標的關鍵。還有其他的滾動條功能，但是以上幾個已經足夠滿足大部分需求了。如果你還有其他有用的技巧或者工具，歡迎分享。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/307182.html
微信掃一掃 
支付寶掃一掃 