vue-custom-scrollbar

Vue.JS 的简约但完美的自定义滚动条组件(使用了 utatti/perfect-scrollbar,所以如果遇到某些问题,可以查看 perfect-scrollbar 仓库)

为什么要自定义滚动条

众所周知,谷歌浏览器支持自定义滚动条,但是火狐或其他浏览器不支持,如果你希望你的网站更完美,就用这个组件吧~

为什么要使用 vue-custom-scrollbar?

vue-custom-scrollbar 是 Vue.JS 的一个简约但完美的自定义滚动条组件

• 不改变设计布局
• 不需要手动操作 DOM
• 使用普通的 scrollTop and scrollLeft
• 滚动条样式可完全自定义
• 布局更改后更新

Demo

安装

安装和使用 vue-custom-scrollbar 的最好的方式是使用 npm 或者 yarn. 它被注册为 vue-custom-scrollbarr.

npm

$ npm install vue-custom-scrollbar

或者

yarn

$ yarn add vue-custom-scrollbar

警告

vue-custom-scrollbar 可以模拟滚动条, 但不是全部类型的. 它在某些情况下也不起作用.你可以在 Caveats 找到例子. 基本上，警告中列出的项目实施起来很苛刻，将来可能无法实施。如果确实需要这些功能，请考虑使用浏览器自带的滚动条

如何使用

实例代码:

<template>
  <div>
    <vue-custom-scrollbar
      class="scroll-area"
      :settings="settings"
      @ps-scroll-y="scrollHanle"
    >
      <img
        src="https://raw.githubusercontent.com/Binaryify/vue-custom-scrollbar/master/docs/azusa.jpg"
        height="720"
        width="1280"
        alt=""
      />
    </vue-custom-scrollbar>
  </div>
</template>
<script>
/**
 * For Vue2/Vue3
*/
import vueCustomScrollbar from 'vue-custom-scrollbar'
import "vue-custom-scrollbar/dist/vueScrollbar.css"
/**
 * For vite
*/
import vueCustomScrollbar from 'vue-custom-scrollbar/src/vue-scrollbar.vue'


export default {
  components: {
    vueCustomScrollbar
  },
  data() {
    return {
      settings: {
        suppressScrollY: false,
        suppressScrollX: false,
        wheelPropagation: false
      }
    }
  },
  methods: {
    scrollHanle(evt) {
      console.log(evt)
    }
  }
}
</script>
<style>
.scroll-area {
  position: relative;
  margin: auto;
  width: 600px;
  height: 400px;
}
</style>

选项

swicher {Boolean}

禁用或启用组件

Default: true

tagname {String}

默认组件根元素为 section,设置该值可修改组件根元素为其他元素,如:div

Default: section

handlers {String[]}

滚动元素的事件列表

Default: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch']

wheelSpeed {Number}

鼠标滚轮事件的滚动速度

Default: 1

wheelPropagation {Boolean}

如果此选项为 true，则当滚动到达边的末尾时，mousewheel 事件将传播到父元素。

Default: true

swipeEasing {Boolean}

如果此选项为 true，则会滚动得比较平缓。

Default: true

minScrollbarLength {Number?}

设置为整数值时，滚动条的滑块部分不会小于该像素数以下。

Default: null

maxScrollbarLength {Number?}

设置为整数值时，滚动条的滑块部分不会超过该像素数。

Default: null

scrollingThreshold {Number}

这将设置 ps--scrolling-x 和 ps--scrolling-y的停留时间阈值。在默认的 CSS 中，无论悬停状态如何，它们都会显示滚动条。单位是毫秒。

Default: 1000

useBothWheelAxes {Boolean}

设置为 true 时，且只有一个（垂直或水平）滚动条是可视的，则垂直和水平滚动都会影响滚动条。

Default: false

suppressScrollX {Boolean}

设置为 true 时，无论内容宽度如何，X 轴上的滚动条都将不可用。

Default: false

suppressScrollY {Boolean}

设置为 true 时，无论内容高度如何，Y 轴上的滚动条都将不可用。

Default: false

scrollXMarginOffset {Number}

在不启用 X 轴滚动条的情况下，内容宽度可以超过容器宽度的像素数。

Default: 0

scrollYMarginOffset {Number}

在不启用 Y 轴滚动条的情况下，内容高度可以超过容器高度的像素数。

Default: 0

事件

vue-custom-scrollbar 触发的自定义事件.

ps-scroll-y

当 y 轴向任一方向滚动时，此事件将触发。

ps-scroll-x

当 x 轴向任一方向滚动时，此事件将触发。

ps-scroll-up

向上滚动时会触发此事件。

ps-scroll-down

向下滚动时会触发此事件。

ps-scroll-left

滚动到左侧时会触发此事件。

ps-scroll-right

滚动到右侧时会触发此事件。

ps-y-reach-start

滚动到达 y 轴的起点时会触发此事件。

ps-y-reach-end

当滚动到达 y 轴的末尾时，此事件将触发（对于无限滚动非常有用）。

ps-x-reach-start

滚动到达 x 轴的起点时会触发此事件。

ps-x-reach-end

滚动到达 x 轴末端时会触发此事件。

自定义样式

请参考 perfect-scrollbar,然后在你的项目覆盖对应 class 的样式

帮助台

如果您有任何想法改进此项目或使用此项目的任何问题，请随时提交 issue

对于常见的问题, 这里有一个 FAQ 维基页面. 请在提交 issues 前查看该页面。

请理解，解决问题可能需要一段时间。上传 PR 将是解决问题的最快方法。

IE 支持

该插件支持现代浏览器，包括 Edge 和 IE11，但在 IE11 中可能存在一些问题，主要是因为 IE 渲染错误涉及滚动属性上的同步更新。在 Caveats 也提到了这个问题 。

不支持 IE <11，并且不接受用于修复 IE <= 10 中的问题的补丁。如果想支持旧的 IE，请 fork 此项目并在本地进行修改。

更多

请参考 perfect-scrollbar

License

MIT