前兩天需要設定滾動條的樣式，一開始我以為只是用css設定就可以了，嗯，果然還是想的很簡單，雖然可以在css設定滾動條樣式，但是只是在火狐，ie瀏覽器上根本就不能用，所以只能使用js外掛程式來設定滾動條的屬性。從網上查的mcustomscrollbar。現在給大家介紹一下這個外掛程式的使用。其實前兩天發現swiper中也有關於滾動條的設定，有興趣的可以看一下。
參考文獻:
使用方法：
需要引入的檔案：
jquery.mcustomscrollbar.js
jquery.mousewheel.min.js
jquery.mcustomscrollbar.css
這三個檔案是必須要引入的，因為這個外掛程式是基於jquery的，所以js的引入順序也需要注意：
首先引入樣式檔案：
<link
href
="jquery.mcustomscrollbar.css"rel="stylesheet"
type
="text/css"
>
接下來引入js檔案,需要引入一下4個js檔案，注意一下引入順序
使用方法
$(function())
常用引數介紹
setwidth: false//設定你內容的寬度 值可以是畫素值或者百分比(string),取值300,"30%"
setheight: false
//設定你內容的高度 值可以是畫素值或者百分比(string),取值300,"30%"
settop: 0 //
設定一開始縱向滾動的位置,取值"100px",值為字串
setleft: 0 //
設定一開始橫向滾動的位置,取值"100px",值為字串
axis: "string" //
"x","y",值為字串，分別對應橫縱向滾動
scrollinertia:integer //
滾動的慣性值 在毫秒中 使用0可以無滾動慣性 (滾動慣性可以使區塊滾動更加平滑)
scrollbarposition: "string" //
取值"inside","outside",值為字串,父元素必須是relative定位，滾動條出在元素的內部(inside)或者外部(outside);
autodraggerlength:boolean： //
根據內容區域自動調整滾動條拖塊的長度 值:true,false
alwaysshowscrollbar:integer //
保持滾動條的顯示，取值0,1(保持滾動塊可見),2(保持滾動條所有的顯示)
mousewheel:
scrollbuttons:
//是否新增 滾動條兩端按鈕支援 值:true,false
scrollbuttons: //
滾動按鈕滾動型別 值:」continuous」(當你點選滾動控制按鈕時斷斷續續滾動) 「pixels」(根據每次點選的畫素數來滾動) 點選這裡可以看到形象的例子
scrollbuttons: //
設定點選滾動按鈕時候的滾動速度(預設 20) 設定乙個更高的數值可以更快的滾動
scrollbuttons: //
設定點選滾動按鈕時候每次滾動的數值 畫素單位 預設 40畫素
advanced:
//根據百分比為自適應布局 調整瀏覽器上滾動條的大小 值:true,false 設定 false 如果你的內容塊已經被固定大小
advanced: //
自動根據動態變換的內容調整滾動條的大小 值:true,false 設定成 true 將會不斷的檢查內容的長度並且據此改變滾動條大小 建議除非必要不要設定成 true 如果頁面中有很多滾動條的時候 它有可能會產生額外的移出 你可以使用 update 方法來替代這個功能
advanced: //
自動擴大水平滾動條的長度 值:true,false 設定 true 你可以根據內容的動態變化自動調整大小 可以看demo
advanced: //
是否自動滾動到聚焦中的物件 例如表單使用類似tab鍵那樣跳轉焦點 值:true false
callbacks: } //
使用自定義的**函式在滾動時間開始的時候執行 具體請看demo
callbacks: } //
自定義**函式在滾動中執行 demo 同上
callbacks: } //
當滾動到底部的時候呼叫這個自定義**函式 demo 同上
callbacks: } //
當滾動到頂部的時候呼叫這個自定義**函式 demo 同上
callbacks: //
設定到達頂部或者底部的偏移量 畫素單位
callbacks: } //
當使用者正在滾動的時候執行這個自定義**函式
callbacks: //
設定呼叫 whilescrolling **函式的時間間隔 毫秒單位
例子
$('.search-result').mcustomscrollbar("scrollto","p.load-box:last",,
advanced:,
horizontalscroll:
false
, callbacks:
},whilescrolling:
function
(){}
}});
python橫向滾動條 控制滾動條
調過js指令碼控制 python 1.coding utf 8 2.from selenium import webdriver 3.import time 5.driver webdriver.firefox 6.driver.get 7.搜尋 8.driver.find element by i...
谷歌滾動條設定 IE滾動條設定
google瀏覽器chrome設定滾動條樣式 courrlist webkit scrollbar courrlist webkit scrollbar track courrlist webkit scrollbar thumb courrlist webkit scrollbar thumb w...
div設定滾動條和滾動條顏色
當div所定義的區域的內容達到一定程度時，在div標籤裡面嵌入css樣式表，定義overflow的屬性值，設定滾動條相關的屬性。注 1.overflow visible 卻省值，沒有滾動條，根據內容自動擴撐區域的大小，即定義的區域無效 scroll 總是顯示滾動條 hidden 沒有滾動條，超出區域...