網頁中滾動條的設置和修改

一、通過css設置滾動條

在所有瀏覽器，滾動條可定製性最強的當屬webkit內核的瀏覽器了。因爲源代碼開放的原因，市面上基於webkit內核的瀏覽器也是很難窮舉完。例如有：Google Chrome、Opera（opera最近宣佈使用webkit內核了）、360極速瀏覽器，獵豹瀏覽器等，搜狗瀏覽器……

下面我們來看一下webkit瀏覽器是如何強大的吧！首先來了解它的屬性:

1. ::-webkit-scrollbar 滾動條整體部分，可以設置寬度等
2. ::-webkit-scrollbar-button 滾動條兩端的按鈕
3. ::-webkit-scrollbar-track  外層軌道
4. ::-webkit-scrollbar-track-piece  內層滾動槽
5. ::-webkit-scrollbar-thumb 滾動的滑塊
6. ::-webkit-scrollbar-corner 邊角
7. ::-webkit-resizer 定義右下角拖動塊的樣式

 

::-webkit-scrollbar ：滾動條整體部分，其中的屬性: width,height,background,border等。

::-webkit-scrollbar-button ：滾動條兩端的按鈕。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。

::-webkit-scrollbar-track ：外層軌道。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。

::-webkit-scrollbar-track-piece ：內層軌道，具體區別看下面gif圖，需要注意的就是它會覆蓋第三個屬性的樣式。

::-webkit-scrollbar-thumb ：滾動條裏面可以拖動的那部分

::-webkit-scrollbar-corner ：邊角，兩個滾動條交匯處

::-webkit-resizer ：兩個滾動條交匯處用於拖動調整元素大小的小控件（基本用不上）
 

二、div定位疊加隱藏實現

在頁面中想要實現一個固定大小區域的內容縱向滾動，此區域的內容是動態渲染的，也就是內容可以在通過後臺編輯修改。當內容較少時，如果出現滾動條會影響頁面的美觀。我們可以設置超出隱藏滾動條的方法實現。

html結構：

    <div class="wrap">
        <div class="container">
            <p>多年來公司堅持科技創新，與時俱進，爲衆多國內外著名五星級酒店設計和製造智能控制 系統和智能開關面板。
                在行業中，我司首家實現了模塊化、自主編程的通用型酒店客房電器控制系統，
                在此基礎上再創 新建立智控雲控智能服務系統，實現對各種燈具的調光、燈光場景、窗簾、空調、
                紅外及各種傳感器進行綜合控制和遙 控。在智能控制面板方面，我司擁有品種規格衆多、功能齊全、設計新穎的系列產品， 
                並根據客戶的需求對智能開關面 板進行個性化設計，深受用戶青睞。
            </p>
        </div>
    </div>

CSS樣式：

.wrap{
    width: 450px;
    height: 300px;
    overflow: hidden;
}
.container{
    width: 460px;
    overflow-y: scroll;
    height: 100%;
}

總結：

1、外層元素必須設置overflow：hidden；

2、內層元素必須設置overflow-y：scroll；

3、內層的寬度必須大於外層的寬度，且正好把滾動條給遮住；

4、內層height：100%；纔能有滾動效果；

 

效果展示：

三、利用插件:jquery.nicescroll.js

nicescroll 滾動條插件是一個非常強大的基於 jQuery 的滾動條插件，不需要增加額外的css，幾乎全瀏覽器兼容。ie6+，實現只需要一段代碼，侵入性非常小，樣式可完全自定義，支持觸摸事件，可在觸摸屏上使用。

官網地址：http://www.areaaperta.com/nicescroll/

GitHub下載地址：https://github.com/inuyaksa/jquery.nicescroll

具體用法：https://www.hangge.com/blog/cache/detail_1931.html