vuescroll
官网：https://vuescrolljs.yvescoding.org/zh/guide/configuration.html#detectresize
主要配置如下
在data里面：
ops: {
vuescroll: {
mode: "native", //模式:pc natice 移动端是slice
sizeStrategy: "percent", //父元素是否是固定的是就percent 不是就是number 填一个数值
detectResize: true, //内容是否根据页面调整
},
scrollPanel: {
initialScrollY: false, //初始化距离顶部的位置
initialScrollX: false, //初始化距离左侧的位置
scrollingX: true, // 是否开启横向滚动
scrollingY: true, //是否开启竖向滚动
speed: 300, //多长时间内完成一次滚动。 数值越小滚动的速度越快。
easing: 'easeInQuad', //默认动画
verticalNativeBarPos: "right",
maxHeight: undefined, //这是滚动条最大高度,内容高度小于 maxHeight 时高度自适应，超出的话出现滚动条。
maxWidth: undefined, //这是滚动条最大宽度,内容宽度小于 maxWidth 时高度自适应，超出的话出现滚动条。
},
rail: {
background: "#000000", //轨道的背景色。
opacity: 0.5, //轨道的透明度。 0是透明，1是不透明
size: "6px", //轨道的尺寸。
specifyBorderRadius: false, //是否指定轨道的 borderRadius， 如果不那么将会自动设置。
gutterOfEnds: null,
gutterOfSide: "0px", //距离容器的距离
keepShow: false, //是否即使 bar 不存在的情况下也保持显示。
},
bar: {
showDelay: 500, //在鼠标离开容器后多长时间隐藏滚动条。
onlyShowBarOnScroll: true, //是否只在滚动时显示 bar。
keepShow: false, //滚动条是否保持显示。
background: "#ff0000", //滚动条背景色。
opacity: 1, //滚动条透明度。
hoverStyle: false,
specifyBorderRadius: false, //是否指定滚动条的 borderRadius， 如果不那么和轨道的保持一致。
minSize: false, //为 bar 设置一个最小尺寸, 从 0 到 1. 如 0.3, 代表 30%.
size: "6px", //bar 的尺寸。
disable: false, //是否禁用滚动条。
},
},
main.js
import vuescroll from 'vuescroll';
// 你可以在这里设置全局配置
Vue.use(vuescroll, {
ops: {}, // 在这里设置全局默认配置
name: 'vue-scroll' // 在这里自定义组件名字，默认是vueScroll
});
使用：
在父元素-vue-scroll-子元素(内容)
<template>
<div class="main">
<vue-scroll>
<div class="main_content">
<div class="content">
<div class="content_title">Nginx配置文件nginx.conf中文详解</div>
<el-row>
<el-col :span="5">
<el-image src="https://i.loli.net/2020/06/05/UtTpoNXKFDQlYIL.jpg" fit="fit"></el-image>
</el-col>
<el-col :span="19">
<el-row>
<el-col>
<div
class="content_desc"
>######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数，建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型，[ debug | info | notice | warn | error | crit ] error_log /usr/local/nginx/logs/error.log info; #进程pid文件 pid /usr/local/nginx/logs/nginx.pid; #指定进程可以打开的最大描述符：数目 #工作模式与连</div>
</el-col>
<el-col>
<div class="content_info">
<i class="el-icon-date"></i>2020-8-5
<i class="el-icon-s-grid"></i>nginx
<i class="el-icon-view"></i>84
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<div class="content">
<div class="content_title">Nginx配置文件nginx.conf中文详解</div>
<el-row>
<el-col :span="5">
<el-image src="https://i.loli.net/2020/06/05/UtTpoNXKFDQlYIL.jpg" fit="fit"></el-image>
</el-col>
<el-col :span="19">
<el-row>
<el-col>
<div
class="content_desc"
>######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数，建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型，[ debug | info | notice | warn | error | crit ] error_log /usr/local/nginx/logs/error.log info; #进程pid文件 pid /usr/local/nginx/logs/nginx.pid; #指定进程可以打开的最大描述符：数目 #工作模式与连</div>
</el-col>
<el-col>
<div class="content_info">
<i class="el-icon-date"></i>2020-8-5
<i class="el-icon-s-grid"></i>nginx
<i class="el-icon-view"></i>84
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<div class="content">
<div class="content_title">Nginx配置文件nginx.conf中文详解</div>
<el-row>
<el-col :span="5">
<el-image src="https://i.loli.net/2020/06/05/UtTpoNXKFDQlYIL.jpg" fit="fit"></el-image>
</el-col>
<el-col :span="19">
<el-row>
<el-col>
<div
class="content_desc"
>######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数，建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型，[ debug | info | notice | warn | error | crit ] error_log /usr/local/nginx/logs/error.log info; #进程pid文件 pid /usr/local/nginx/logs/nginx.pid; #指定进程可以打开的最大描述符：数目 #工作模式与连</div>
</el-col>
<el-col>
<div class="content_info">
<i class="el-icon-date"></i>2020-8-5
<i class="el-icon-s-grid"></i>nginx
<i class="el-icon-view"></i>84
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<div class="content">
<div class="content_title">Nginx配置文件nginx.conf中文详解</div>
<el-row>
<el-col :span="5">
<el-image src="https://i.loli.net/2020/06/05/UtTpoNXKFDQlYIL.jpg" fit="fit"></el-image>
</el-col>
<el-col :span="19">
<el-row>
<el-col>
<div
class="content_desc"
>######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数，建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型，[ debug | info | notice | warn | error | crit ] error_log /usr/local/nginx/logs/error.log info; #进程pid文件 pid /usr/local/nginx/logs/nginx.pid; #指定进程可以打开的最大描述符：数目 #工作模式与连</div>
</el-col>
<el-col>
<div class="content_info">
<i class="el-icon-date"></i>2020-8-5
<i class="el-icon-s-grid"></i>nginx
<i class="el-icon-view"></i>84
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<div class="content">
<div class="content_title">Nginx配置文件nginx.conf中文详解</div>
<el-row>
<el-col :span="5">
<el-image src="https://i.loli.net/2020/06/05/UtTpoNXKFDQlYIL.jpg" fit="fit"></el-image>
</el-col>
<el-col :span="19">
<el-row>
<el-col>
<div
class="content_desc"
>######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数，建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型，[ debug | info | notice | warn | error | crit ] error_log /usr/local/nginx/logs/error.log info; #进程pid文件 pid /usr/local/nginx/logs/nginx.pid; #指定进程可以打开的最大描述符：数目 #工作模式与连</div>
</el-col>
<el-col>
<div class="content_info">
<i class="el-icon-date"></i>2020-8-5
<i class="el-icon-s-grid"></i>nginx
<i class="el-icon-view"></i>84
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</div>
</vue-scroll>
</div>
</template>
