binaryify / vue-custom-scrollbar Goto Github PK

View Code? Open in Web Editor NEW

143.0 5.0 16.0 4.33 MB

Minimalistic but perfect custom scrollbar component for Vue.JS

Home Page: https://binaryify.github.io/vue-custom-scrollbar/

License: MIT License

JavaScript 7.83% Shell 10.55% HTML 18.13% Vue 63.49%

perfect-scrollbar vue-perfect-scrollbar vue-custom-scrollbar scrollbar vue-scrollbar

vue-custom-scrollbar's Introduction

vue-custom-scrollbar

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

Minimalistic but perfect custom scrollbar component for Vue.JS(using utatti/perfect-scrollbar, so if you have any question, you also can check the perfect-scrollbar repo)

为什么要自定义滚动条/Why custom scrollbar

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

As you know, Chrome support custom scrollbar, but Firefox or other browsers don't support it, if you want your website perfect, please use this component~

为什么要使用 vue-custom-scrollbar?/Why use vue-custom-scrollbar?

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

vue-custom-scrollbar is minimalistic but perfect scrollbar component for Vue.JS.

不改变设计布局 / No change on design layout
不需要手动操作 DOM / Don't need manipulate DOM manually
使用普通的 scrollTop and scrollLeft / Use plain scrollTop and scrollLeft
滚动条样式可完全自定义 / Scrollbar style is fully customizable
布局更改后更新 / Efficient update on layout change

文档/Docs

Docs

例子/Example

<template>
 <div>
  <vue-custom-scrollbar class="scroll-area"  :settings="settings" @ps-scroll-y="scrollHanle">
    <img src="http://utatti.github.io/perfect-scrollbar/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>

License

MIT

vue-custom-scrollbar's People

Contributors

Stargazers

Watchers

Forkers

ryanblak exxxar dakanga fiamma06 morr benedict-jackson kvahlin 7cripter jeddabahbah powered357 jmdmahdi zitumi akaashmyth github-ljrong neongkh akaedu2012

vue-custom-scrollbar's Issues

Update perfect-scrollbar to ^1.5.1 to fix "Cannot read property 'scrollTop' of null" issue

We're encountering a lot of Cannot read property 'scrollTop' of null errors (https://github.com/mdbootstrap/perfect-scrollbar/issues/835).

This was fixed in perfect-scrollbar 1.5.1 (https://github.com/mdbootstrap/perfect-scrollbar/releases/tag/1.5.1), but looking at the /dist/ of 1.4.1 published on NPM, version 1.5.0 is still bundled (like here https://github.com/Binaryify/vue-custom-scrollbar/blob/master/dist/vueScrollbar.umd.min.js#L3).

Could we bump the perfect-scrollbar version, rebuild and publish?

Thank you

Fix this in documentation

hi, @Binaryify .
Fix this settings in documentation, please.
In docs you write
wheelPropagation Default: false

https://binaryify.github.io/vue-custom-scrollbar/en/#wheelpropagation-boolean

vue-custom-scrollbar/dist/vueScrollbar.common.js

Line 1750 in 54d9da9

wheelPropagation: true,

希望提供浏览器引入的安装方式

如题，可以像下面这种方式进行引入

<script type="text/javascript" src="https://unpkg.com/vue-custom-scrollbar"></script>

现在这样引用没办法使用。

Hi!
Is it possible to scroll using mouse wheel? I know that horizontal scroll works when you press Shift while mousescrolling, but I'd like to scroll without pressing Shift.
Vertical scroll is disabled:

suppressScrollY: true,
suppressScrollX: false,

Touch scroll-x

Touch scroll-x not working!

Manually trigger ps.update() method

Is it possible to manually call ps.update() or similar methods when the content within the wrapper changed?

Any TypeScript Support?

Subj.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Update dependency perfect-scrollbar to v1.5.5
Update vue-cli monorepo to v4.5.19 (@vue/cli-plugin-babel, @vue/cli-service)
Update dependency vuepress to v1.9.10
Update vue monorepo to v2.7.16 (vue, vue-template-compiler)
Update dependency vue to v3
Update vue-cli monorepo to v5 (major) (@vue/cli-plugin-babel, @vue/cli-service)
Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

perfect-scrollbar ^1.5.3

vue ^2.6.11

@vue/cli-plugin-babel 4.5.6

@vue/cli-service 4.5.6

vue-template-compiler ^2.6.12

vuepress 1.6.0

Check this box to trigger a request for Renovate to run again on this repository

Unexpected infinity scroll-X

Hello, while x-scrolling got infinity scrolling and error in the console.

Tab in Tabs can be added and removed.
If I set the last tab is Active, the scroll width will be normal

<div class="flex">
      <vue-custom-scrollbar
        :settings="{ wheelPropagation: true }"
        tagname="div"
        class="flex overflow-x-scroll rounded-tl relative"
      >
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          style="max-width: 200px;"
          :class="[
            'relative p-3',
            index === 0 ? 'rounded-tl' : '',
            tab.isActive ? 'bg-white' : 'bg-light-disabled',
          ]"
        >
          <h4
            @click="setActive(index)"
            class="cursor-pointer font-semibold text-md text-default"
          >
            ОСАГО
          </h4>
          <img
            v-if="tabs.length > 1"
            @click="removeTab(index)"
            :src="require('@/assets/icons/close.svg')"
            alt="Закрыть вкладку"
            class="absolute cursor-pointer"
            style="top: 10px; right: 10px;"
          />
          <p
            class="text-sm text-hint truncate"
            :title="tab.car.model ? tab.car.model : 'Новый расчет'"
          >
            {{ tab.car.model ? tab.car.model : 'Новый расчет' }}
          </p>
        </div>
      </vue-custom-scrollbar>

Details:

"vue": "^2.6.11",
"vue-custom-scrollbar": "^1.3.0"

On window resize scrollbar is not showing up

I applied the scrollbar component on list and when I resize window it is not showing scrollbar when I refresh the page it is showing up then only.

Mobile scroll problem

Hi,

Issue: You can't scroll after touching the scroll-x bar.

Steps;

1- Open your chrome on mobile.
2- Go to the demo
3- Try scroll down and touch the scroll-y bar. https://prnt.sc/t00rbu
4- Try again to scroll down and up.

Refs are not conserved

When using ref on a vue-custom-scrollbar, the attribute will disappear on rendering.

"Missing "./server-renderer" specifier in "vue" package" error on Nuxt 3 build

I use this package on Nuxt 3 app. It worked until 3.2 version released. Now on build it gives this error:
"Missing "./server-renderer" specifier in "vue" package"

Is this possible to be resolved or should I consider some other package for custom scrollbar?

Here is the reproduction

`[commonjs--resolver] Missing "./server-renderer" specifier in "vue" package

ERROR Missing "./server-renderer" specifier in "vue" package 18:42:19

at e (node_modules/vite/dist/node/chunks/dep-9912c491.js:14845:25)
at n (node_modules/vite/dist/node/chunks/dep-9912c491.js:14845:627)
at o (node_modules/vite/dist/node/chunks/dep-9912c491.js:14845:1276)
at resolveExports (node_modules/vite/dist/node/chunks/dep-9912c491.js:22032:20)
at resolveDeepImport (node_modules/vite/dist/node/chunks/dep-9912c491.js:22051:31)
at tryNodeResolve (node_modules/vite/dist/node/chunks/dep-9912c491.js:21736:20)
at Object.resolveId (node_modules/vite/dist/node/chunks/dep-9912c491.js:21487:28)
at Object.handler (node_modules/vite/dist/node/chunks/dep-9912c491.js:44849:19)
at node_modules/rollup/dist/es/shared/rollup.js:24011:40
at async PluginDriver.hookFirstAndGetPlugin (node_modules/rollup/dist/es/shared/rollup.js:23911:28)
at async resolveId (node_modules/rollup/dist/es/shared/rollup.js:22855:26)
at async ModuleLoader.resolveId (node_modules/rollup/dist/es/shared/rollup.js:23119:15)
at async Object.resolveId (node_modules/vite/dist/node/chunks/dep-9912c491.js:7972:10)
at async PluginDriver.hookFirstAndGetPlugin (node_modules/rollup/dist/es/shared/rollup.js:23911:28)
at async resolveId (node_modules/rollup/dist/es/shared/rollup.js:22855:26)
at async ModuleLoader.resolveId (node_modules/rollup/dist/es/shared/rollup.js:23119:15)
at async node_modules/rollup/dist/es/shared/rollup.js:23407:50`

Support SSR

vue-custom-scrollbar is awesome, but it doesn't play well with SSR. If you import vue-custom-scrollbar directly it will break SSR because of the reference of document object.

As a workaround, I write a simple wrapper to disable it for SSR.

<!-- wrap vue-custom-scrollbar for SSR -->
<template>
  <component :is="scrollbar" v-if="scrollbar" v-bind="$attrs">
    <slot></slot>
  </component>
</template>

<script>
export default {
  computed: {
    scrollbar() {
      if (!this.$isServer)
        return () => import('vue-custom-scrollbar');
      return null;
    }
  }
};
</script>

However, it could be a better solution here.

Mouse wheel event to scroll horizontally

I'm only working with horizontal scrolls.
What do I need to do to change the mouse wheel from Y to X?

There is any method to trigger the scrolling programmatically?

Click is not registered for iOS on first interaction

When interacting with elements passed into the scrollbar slot, the first touch does not register as a click on iOS Safari.

In vue-scrollbar.vue there is the event handling code @mouseover.once="update". The update method calls a ps.update, which results in the content changing. In iOS, this results in the events lower in the hierarchy not firing; one of those events is click. This StackOverflow post explains the issue well.

1.4.0 无法滚动

1.2.0版本正常

当内容比较少（比如只有1个），ps-y-reach-end事件会不停地触发，请问如何解决呀？

disable vuex events

Is it possible to disable scroll events? Its really slowing down my app

How to remake ALL scrollbars in a big project globally?

Hello. I have a big project and a lot of legacy.
I have a task to remake the scroll.

Pointwise, I can add a custom scroll to 1 or 2 or 3 areas, but how to add a custom scroll to ALL areas / lists and so on?
Is there any automatic way or global setting?

How to add this component to <body> tag ?

Hi! i tryed to use this in app.vue to replace the ugly browser native scrolling for the whole website... i add height: 100vh to ps-container... and yeah... thats it, its working... But now are the native hash scrollings are not working any more. I talk about links they scroll to any id's

is there any way to solve this?

Trigger scrolling programmatically

There is any method to trigger the scrolling programmatically?

[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance.

When using vueCustomScrollbar in a modal window, this results in the error:
[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance.

<vue-custom-scrollbar class="scroll-area" :settings="scrollSettings"><div class="column"></div></vue-custom-scrollbar>

Any suggestions would be nice.

Bug thumb container

Hi!
I saw strange reaction of scroll thumb, try click in white space betwen top and bottom lines.
Red color.
https://ibb.co/CQCwcLJ

Can support scroll bar to the bottom by default？

No method was found in the document。

It would be nice if there was a solution

Thank you very much！