一、方法1 使用elment-ui 的滾動條

默認樣式hover的時候顯示
在這里插入圖片描述

在頁面中使用

在這里插入圖片描述

.el-scrollbar {
  height: 100%;
}
//這里隱藏橫向滾動條的樣式
.el-scrollbar__wrap {
  overflow-x: hidden;
}

二、方法2基于gemini-scrollbar封裝的vue組件

①、引入 npm i vue-gemini-scrollbar --save
如需script方式引入，請自行編譯，build后在disk檔案夾（vue-gemini-scrollbar.js）
無需配置橫向或縱向滾動，自定義滾動條完全按照原生的方式去顯示（也就是如果區域存在縱向滾動條，使用它后將替換縱向滾動條），正因為如此，請不要使用::-webkit-scrollbar來修飾原生滾動條，這樣會影響對滾動條寬度的檢測，
基于gemini-scrollbar封裝的vue組件
基于原生滾動的自定義滾動條
支持IE9+

Attributes

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

注意： createElements引數在這里被強制置為false，不可配置，因為啟用它可能會影響Vue的virtual DOM，

②、在main.js中引入
在這里插入圖片描述
③、在頁面中使用

④、自定義樣式

// 自定義滾動條
  .my-scroll-bar {
    height: 78vh;
  }
  .scroll-Right {
    height: 44vh;
    padding: 2px;
    right: 3px;
    position: relative;
  }
  .gm-scrollbar.-vertical {
    // top: 0px;
    width: 5px;
    right: 0px;
  }
  .gm-scrollbar.-horizontal {
  //隱藏橫向滾動條
    height: 0px;
  }

  /* vertical scrollbar track */
  .gm-scrollbar.-vertical {
    background-color: #1b6dda;
    // opacity: 0; //隱藏滾動條
  }

  /* scrollbar thumb */
  .gm-scrollbar .thumb {
    background-color: rgb(151, 147, 147);
  }

  .gm-scrollbar .thumb:hover {
    background-color: rgb(196, 193, 193);
  }

為body設定滾動條

因為vue組件的根元素不能為body，此時可以從 Vue.$geminiScrollbar 訪問到GeminiScrollbar物件，然后你就可以自由使用它了（檔案請參考：gemini-scrollbar），

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

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

注：方法二轉自 https://segmentfault.com/a/1190000013338560

方法3 基于vue自定義封裝組件，這里

碼碼不易，先點個贊吧

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/319755.html

標籤：其他

上一篇：無法找到模塊'@storybook/react'或其相應的型別宣告。在Heroku上

下一篇：ES6中的常用知識點總結