Vue (react, jquery) scroll bar plug-in (element-ui comes with a scroll bar component)

The download volume of this thing is still quite large, please check the npm documentation for details .

Quickly Start

1. Download dependencies:
   cnpm i overlayscrollbars overlayscrollbars-vue -SFor vue, two dependencies need to be downloaded here.
2. main.js reference Copy and paste the following code directly into the project

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

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

3. Project use (component use) Here you need to pay attention, the content of the package must exceed the height of overlay-scrollbars, and browser scroll bars will be generated to take effect.
   That is to say, when the height overlay-scrollbarsof is auto, it will expand with the content, so there will be no scroll bars.

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

for example

1. Page preparation: a simple style preparation, in order to support the scroll bar

<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>

• At this time, the big ugly scroll bar on the right ran out.
  

2. At this time, our most important thing is to modify the scroll bar for the current test page, so we can do it on the test page.

<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>

At this time, the scroll bar has changed, but it may be a little different from some people's ideals. This even scrolls the header

3. Only the body is scrolled

<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>

There are two places that need to be changed compared to the initial

The scroll bar attached to the element component

Just tm outrageous, element itself has a scroll bar component, but the interface is not very rich (I have components, but they are not for you to use, just for fun).
Attributes

parameter	illustrate	type	optional value	Defaults
native	Whether to display the scroll bar when the mouse is moved in	boolean	—	true
wrapStyle	container style	String / Array	—	—
wrapClass	The class name of the container	String / Array	—	—
viewClass	The style of the content wrapper (tag)	String / Array	—	—
viewStyle	The class name (tag) of the content wrapper	String / Array	—	—
noresize	Whether to change with the window (if the container size will not change, it is best to set it to optimize performance)	string	false: change with the window; | true: not change with the window	false
tag	wrapper label	string	—	div

wrapStyleFor viewClassthe understanding of and :

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

Therefore, the style of the scroll bar cannot be configured through the label attribute, it needs .el-scrollbar__thumbto

Setting .el-scrollbar__bar{ opacity: 1; }If the content exceeds, the scroll bar will be permanently displayed, and will not move out of the shadow