vue(react、jquery) 滚动条 插件 (element-ui自带滚动条组件)

这个东西下载量还是蛮大的详情查看npm文档。

Quickly Start

1. 下载依赖：
   cnpm i overlayscrollbars overlayscrollbars-vue -S 针对vue的话，这里需要下载两个依赖。
2. main.js 引用 直接将下面的的代码，复制粘贴到项目里面

import 'overlayscrollbars/css/OverlayScrollbars.css';
import OverlayScrollbars from 'overlayscrollbars';
import {
    
     OverlayScrollbarsPlugin } from 'overlayscrollbars-vue';

Vue.use(OverlayScrollbarsPlugin);
Vue.use(OverlayScrollbars);

3. 项目使用（组件使用）这里需要注意下，包裹的内容要超出 overlay-scrollbars 的高度，产生浏览器滚动条，才会生效哟。
   也就是说，当 overlay-scrollbars 的高度为 auto ，随内容撑开，那就不会产生滚动条了。

<overlay-scrollbars style="height:100%">
	content...
</overlay-scrollbars>

比如说

1. 页面准备：一个简单的样式准备，为了撑出滚动条

<template>
    <div class='test'>
        <div class="head">
            header
        </div>
        <div class="body">
            <p v-for="item in 20" :key="item">body{
   
   {item}}</p>
        </div>
    </div>
</template>

<style lang='scss' scoped>
// App.vue 样式
// html,
// body,
// #app {
      
      
//     height: 100%;
//     width: 100%;
// }

.test {
      
      
    height: 100%;

    .head {
      
      
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 32px;
        background-color: #777;
    }

    .body {
      
      
        padding-left: 50px;
        line-height: 100px;
        font-size: 20px;
        background-color: #ccc;
    }
}
</style>

• 这个时候右边的那大坨丑陋的滚动条就跑出来了
  

2. 这个时候我们最主要的是为当前 test 页面修改滚动条，所以在test页面做处理就行了。

<template>
<!-- 将最外层根标签，换为我们引用的组件， 然后其他地方不用变 -->
    <overlay-scrollbars class='test'>
        <div class="head">
            header
        </div>
        <div class="body">
            <p v-for="item in 20" :key="item">body{
   
   {item}}</p>
        </div>
    </overlay-scrollbars>
</template>

这个时候，滚动条就变了，但是和部分人理想的可能有点差距，这个连header都滚动了

3. 只滚动 body

<template>
    <div class='test'>
        <div class="head">
            header
        </div>
        <!-- 改了 body 的标签 -->
        <overlay-scrollbars class="body">
            <p v-for="item in 20" :key="item">body{
   
   {item}}</p>
        </overlay-scrollbars>
    </div>
</template>

<style lang='scss' scoped>
.test {
      
      
    height: 100%;

    .head {
      
      
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 32px;
        background-color: #777;
    }

    .body {
      
      
    	/* - 将 body 的高度固定了 - */
        height: calc(100% - 50px);
        padding-left: 50px;
        line-height: 100px;
        font-size: 20px;
        background-color: #ccc;
    }
}
</style>

就需要相比最初始的改动两个地方

element组件附带的滚动条

就tm离谱，element自己就带有滚动条的组件，但是接口不是很丰富(我有组件，就是不给你用，就是玩儿)。
Attributes

参数	说明	类型	可选值	默认值
native	鼠标移入时，是否展示滚动条	boolean	—	true
wrapStyle	容器的样式	String / Array	—	—
wrapClass	容器的class名	String / Array	—	—
viewClass	内容包裹器的样式 (tag)	String / Array	—	—
viewStyle	内容包裹器的class名 (tag)	String / Array	—	—
noresize	是否随视窗改变(如果 container 尺寸不会发生变化，最好设置它可以优化性能 )	string	false: 随视窗改变； | true： 不随视窗改变	false
tag	包裹器的标签	string	—	div

对于 wrapStyle 和 viewClass 的理解：

	可以理解为： wrapStyle 的 z-index: -1; (视窗区域的样式)
				viewStyle 的 z-index: 0; (内容区域的样式)
				你自己内容 的 z-index: 1; 

所以不能通过 标签属性 来配置滚动条的样式， 需要通过 class名 .el-scrollbar__thumb 来设置

设置 .el-scrollbar__bar{ opacity: 1; } 如果内容超出，就会永久显示滚动条了，并不会移出影藏了