ios滚动条影响父页面 vue_GitHub - lx544690189/vue-gemini-scrollbar: Custom overlay-scrollbars with native scr...

vue-gemini-scrollbar

介绍

无需配置横向或纵向滚动，自定义滚动条完全按照原生的方式去显示(也就是如果区域存在纵向滚动条，使用它后将替换纵向滚动条)。正因为如此，请不要使用::-webkit-scrollbar来修饰原生滚动条，这样会影响对滚动条宽度的检测。

基于原生滚动的自定义滚动条

支持IE9+

安装

npm i vue-gemini-scrollbar --save

如需script方式引入，请自行编译，build后在disk文件夹(vue-gemini-scrollbar.js)

npm run build

Attributes

参数

类型

默认值

说明

autoCreate

Boolean

true

自动创建自定义滚动条

autoshow

Boolean

false

hover时才显示滚动条

forceGemini

Boolean

false

原生滚动条可见的情况下，强制显示自定义滚动条(开发时会比较有用)

minThumbSize

Number

20

滚动条最小长度

注意：

createElements参数在这里被强制置为false，不可配置，因为启用它可能会影响Vue的virtual DOM。

Events

事件名称

回调参数

说明

ready

geminiScrollbar实例

GeminiScrollbar实例创建

resize

-

滚动区域大小调整时触发

Methods

方法名称

说明

create

创建滚动区域

update

重新计算滚动区域大小(vue可以监听并触发组件updated的时候，都不需要你手动去调用它；但是像图片资源的load导致高度变化，你需要在合适的时候去手动调用；)

destroy

移除绑定事件及滚动条元素

如何调用：

监听ready事件，通过回调函数的参数geminiScrollbar实例来调用这些方法

使用

安装组件

import Vue from 'vue'

import GeminiScrollbar from 'vue-gemini-scrollbar'

Vue.use(GeminiScrollbar)

在模板中使用

class="my-scroll-bar">

content...

注意：只有内容溢出才会有滚动效果

.my-scroll-bar{

height:200px;

}

添加自己的滚动条样式

/* override gemini-scrollbar default styles */

/* vertical scrollbar track */

.gm-scrollbar.-vertical {

background-color: #f0f0f0

}

/* horizontal scrollbar track */

.gm-scrollbar.-horizontal {

background-color: transparent;

}

/* scrollbar thumb */

.gm-scrollbar .thumb {

background-color: rebeccapurple;

}

.gm-scrollbar .thumb:hover {

background-color: fuchsia;

}

如何为body设置自定义滚动条

因为vue组件的根元素不能为body，此时可以从Vue.$geminiScrollbar访问到GeminiScrollbar对象，然后你就可以自由使用它了(文档请参考：gemini-scrollbar)。

html {

height: 100%;

/* or */

height: 100vh;

}

var scrollbar = new Vue.$geminiScrollbar({

element: document.body

}).create();

其他实现