滚动组件 Scrollbar

由于默认浏览器滚动条极为丑陋切不同浏览器之间样式不统一，故封装一个滚动组件用于实现滚动

基础用法

使用b-scrollbar进行包裹，默认slot为内容显示区域,如当前示例所包含的滚动结构如下:

我是填充内容....

<template>
  <div style="height: 300px">
    <b-scrollbar ref="componentScrollBar" style="height: 100%">
      <p v-for="i in 40" :key="i">我是填充内容....</p>
    </b-scrollbar>
  </div>
</template>

<template>
  <div style="height: 300px">
    <b-scrollbar ref="componentScrollBar" style="height: 100%">
      <p v-for="i in 40" :key="i">我是填充内容....</p>
    </b-scrollbar>
  </div>
</template>

注意：如果内容区域不超过容器高度则不会生成滚动条

始终显示

使用always可以让滚动条始终显示出来

我是填充内容....

<template>
  <div style="height: 300px">
    <b-scrollbar ref="componentScrollBar" always noresize>
      <p v-for="i in 40" :key="i">我是填充内容....</p>
    </b-scrollbar>
  </div>
</template>

<template>
  <div style="height: 300px">
    <b-scrollbar ref="componentScrollBar" always noresize>
      <p v-for="i in 40" :key="i">我是填充内容....</p>
    </b-scrollbar>
  </div>
</template>

定制滚动条的样式

可以借助不同的props来定制滚动条的样式，也可以使用css来实现样式修改。

我是填充内容....

<template>
  <div style="height: 300px">
    <b-scrollbar
      ref="componentScrollBar"
      always
      noresize
      :bar-style="{ background: 'rgba(110, 23, 122, 0.3)' }"
      :bar-wrap-style="{ background: 'rgba(0, 0, 0, 0.03)' }"
    >
      <p v-for="i in 40" :key="i">我是填充内容....</p>
    </b-scrollbar>
  </div>
</template>

<template>
  <div style="height: 300px">
    <b-scrollbar
      ref="componentScrollBar"
      always
      noresize
      :bar-style="{ background: 'rgba(110, 23, 122, 0.3)' }"
      :bar-wrap-style="{ background: 'rgba(0, 0, 0, 0.03)' }"
    >
      <p v-for="i in 40" :key="i">我是填充内容....</p>
    </b-scrollbar>
  </div>
</template>

注意事项

b-scrollbar的父层要有固定高度
b-scrollbar的高度要设成100%
如果出现横滚动条，请添加css（.bin-scrollbar__wrap{overflow-x:hidden;}）

Props

参数	说明	类型	可选值	默认值
native	是否采用原生滚动 (隐藏原生滚动条)	Boolean	true	false
always	是否一直显示，而非悬停显示	Boolean	true	false
wrapStyle	内联方式自定义wrap容器的样式	Object	-	{}
wrapClass	类名方式自定义wrap容器的样式	Object	-	{}
viewClass	类名方式自定义view容器的样式	Object	-	{}
viewStyle	内联方式自定义view容器的样式	Object	-	{}
barStyle	滚动条thumb样式	Object	-	{}
barWrapStyle	滚动条bar样式	Object	-	{}
noresize	如果 container 尺寸不会发生变化，最好设置它可以优化性能	Boolean	true	false

滚动组件 Scrollbar ​

基础用法 ​

始终显示 ​

定制滚动条的样式 ​

注意事项 ​

Props ​

滚动组件 Scrollbar

基础用法

始终显示

定制滚动条的样式

注意事项

Props