vue+elment项目，自定义滚动条

一、方法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自定义封装组件，这里

码码不易，先点个赞吧

码码不易，先点个赞吧