vue-gemini-scrollbar（vue組件-自定義滾動條）

vue-gemini-scrollbar

查看demo

介紹

無需配置橫向或縱向滾動，自定義滾動條徹底按照原生的方式去顯示（也就是若是區域存在縱向滾動條，使用它後將替換縱向滾動條）。正由於如此，請不要使用::-webkit-scrollbar來修飾原生滾動條，這樣會影響對滾動條寬度的檢測。

• 基於gemini-scrollbar封裝的vue組件
• 基於原生滾動的自定義滾動條
• 支持IE9+

安裝

npm i vue-gemini-scrollbar --save

如需script方式引入，請自行編譯，build後在disk文件夾（vue-gemini-scrollbar.js）

npm run build

Attributes

參數	類型	默認值	說明
autoCreate	Boolean	true	自動建立自定義滾動條
autoshow	Boolean	false	hover時才顯示滾動條
forceGemini	Boolean	false	原生滾動條可見的狀況下，強制顯示自定義滾動條（開發時會比較有用）
minThumbSize	Number	20	滾動條最小長度

注意：
createElements參數在這裏被強制置爲false，不可配置，由於啓用它可能會影響Vue的virtual DOM。

Events

事件名稱	回調參數	說明
ready	geminiScrollbar實例	GeminiScrollbar實例建立
resize	-	滾動區域大小調整時觸發

Methods

方法名稱	說明
create	建立滾動區域
update	從新計算滾動區域大小（vue能夠監聽並觸發組件updated的時候，都不須要你手動去調用它；可是像圖片資源的load致使高度變化，你須要在合適的時候去手動調用；）
destroy	移除綁定事件及滾動條元素

如何調用：
監聽ready事件，經過回調函數的參數geminiScrollbar實例來調用這些方法

使用

安裝組件

import Vue from 'vue'
import GeminiScrollbar from 'vue-gemini-scrollbar'

Vue.use(GeminiScrollbar)

在模板中使用

<GeminiScrollbar
    class="my-scroll-bar">
    content...
</GeminiScrollbar>

注意：只有內容溢出纔會有滾動效果

.my-scroll-bar{
    height:200px;
}

添加本身的滾動條樣式

/* override gemini-scrollbar default styles */

/* vertical scrollbar track */
.gm-scrollbar.-vertical {
  background-color: #f0f0f0
}

/* horizontal scrollbar track */
.gm-scrollbar.-horizontal {
  background-color: transparent;
}

/* scrollbar thumb */
.gm-scrollbar .thumb {
  background-color: rebeccapurple;
}
.gm-scrollbar .thumb:hover {
  background-color: fuchsia;
}

如何爲body設置自定義滾動條

由於vue組件的根元素不能爲body，此時能夠從Vue.$geminiScrollbar訪問到GeminiScrollbar對象，而後你就能夠自由使用它了（文檔請參考：gemini-scrollbar）。

html {
    height: 100%;
    /* or */
    height: 100vh;
}

var scrollbar = new Vue.$geminiScrollbar({
    element: document.body
}).create();

其餘實現

• gemini-scrollbar（原生js）
• react-gemini-scrollbar（react）