A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Overview

Vuescroll

VersionBuild Status Coverage License Download prettier

Demo

Introduction

Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default value(It means you don't even have to write any configuration). Just wrap the content by <vue-scroll> and a custom scrollbar will show. It supports:

  • Customizable scrollbar
  • Pull-to-refresh, push-to-load
  • Carousel

Vuescroll's compatibility is the same as Vue.js 2.X.

Demo

  • You can find demo under examples folder of repo.
  • You can see the full features of vuescroll at Live Demo section of the website.

Install

npm i vuescroll -S

# OR

yarn add vuescroll

Usage

Import and registry

import vuescroll from 'vuescroll';
import Vue from 'vue';

Vue.use(vuescroll);

// OR

Vue.component('vue-scroll', vuescroll);

Wrap the content by vue-scroll

<div class="container">
  <vue-scroll>
    <div class="content"></div>
  </vue-scroll>
</div>

Documentation

For detailed docs, please see Guide section on the website.

Communication

  • Wechat

Demo

  • Twitter

@wangyi70991

License

MIT By Yves Wang(Wangyi Yi)

Issues
  • 怎么弄上下三角形箭头

    怎么弄上下三角形箭头

    @wangyi7099 我看API就是改成native像下面这样不就可以了么?? 我这个为什么不好使

    opened by YuFy1314 23
  • Scroll detection by max-height.

    Scroll detection by max-height.

    Hello, is it possible to make scroll detection by max-height?

    need repro need reply 
    opened by VitoMotto 15
  • How do you think vuescroll docs?

    How do you think vuescroll docs?

    Any suggestion? Thanks !

    discussion 
    opened by wangyi7099 14
  • Last update introduces a bug on vuescroll-panel

    Last update introduces a bug on vuescroll-panel

    On the last update, vuescroll-panel seems to not be set correctly, and the margin-right: -17px, used to hide the browser scollbar and the overflow-y: scroll, don't appear until you hover the panel, you can force the browser scrollbar to appear by refreshing the browser, be sure your mouse cursor is not hovering the panel.

    That bug forced me to specify two those properties on my styles in order to fix it.

    Chrome version: 61 (I'm using Electron) OS: Windows

    help wanted vue related 
    opened by doctorsirius 12
  • 外层嵌套vuescroll后内部的原始scroll无法用鼠标中键滚动

    外层嵌套vuescroll后内部的原始scroll无法用鼠标中键滚动

    win10, vue + antd + vuescroll(最新).

    ==================

    事情是这样的,

    我在antd Modal 里有一个vuescroll滚动条,滚动条内 有一个富文本,但是富文本用的是原始scroll.

    在富文本里写完长文本后 无法用鼠标中键滚动 ,鼠标中键滚动反而会触发 外层 Modal的滚动条。 只能拖动。

    可能是我使用的方法问题,但是在网上实在没有找到靠谱的解决办法,所以只能在这请教下是什么原因导致的?

    opened by GlodenBoy 12
  • duplicate scrollbar on Firefox

    duplicate scrollbar on Firefox

    Tried this in the latest Firefox quantum but the native scrollbar is still visible.

    capture

    opened by emreed1 12
  • 在使用vuescroll之后,部分ui控件就不能自适应了,例如element-ui的table

    在使用vuescroll之后,部分ui控件就不能自适应了,例如element-ui的table

    在用vuescroll之后,element-ui的table控件宽度无法自适应,只要宽度变小,就会出现横向滚动条

    opened by Abigale-ztg 11
  • Edge browser support

    Edge browser support

    Hello

    Looks like there's an issue on Edge. The scroll appears, but the content is not hidden. It overflows. Works fine on Chrome/Firefox/IE11. :thinking:

    opened by Humeira 11
  • 滚动条不能鼠标拖动

    滚动条不能鼠标拖动

    滚动条不能鼠标点击拖动,只能滚轮,不知道是需要配置还是我使用方式不对,还是本身就是一个BUG

    help wanted 
    opened by hametan 10
  • 滚动条BUG

    滚动条BUG

    当我不给父级 固定height时 无法出现滚动条 例如:max-height: calc(100% - xxpx) || height: calc(100% - xxpx)

    opened by kouseisama 10
  • 滚动容器内部使用text-overflow: ellipsis无法做到自适应

    滚动容器内部使用text-overflow: ellipsis无法做到自适应

    发现__view 采用了-webkit-fit-content,导致溢出省略无法自适应,只能设置固定宽度

    opened by whateveryoudo 0
  • scrollIntoView second parameter is boolean but it shouldn't

    scrollIntoView second parameter is boolean but it shouldn't

    The second parameter of scrollIntoView method it is a boolean called animate, but then the method calls scrollBy with animate as the second parameter, but the second parameter of scrollBy is the speed and it is numeric

    opened by luisxxor 0
  • 如何让滚动条不遮挡内容

    如何让滚动条不遮挡内容

    null

    opened by gengjinshuai 0
  • Bounce property

    Bounce property

    In the documentation for vuescroll(slidemode) there is a property for bouncing.

    There are no documentation of the use and no matter which of the settings i try it does not work. Is this property supposed to work ? If not are there any plans to make it work ?

    opened by joingenor 0
  • How to disabled ?

    How to disabled ?

    I want to disabled this plugin in a desktop and use it only on a mobile.

    opened by golubvladimir 0
  • Windows standard scrollbars visible when zooming in

    Windows standard scrollbars visible when zooming in

    When zooming in (50%) in chrome webbrowser the standard Windows scrollbars become visible. These window scrollbars will disappear when the page is refreshed but in our application we use the browser zoom function a lot so it is very ugly to see them and have to refresh constantly.

    I used Chrome, Windows 10, your demo page and zoomed in at 50%

    opened by LynseyHens 5
  • 框架结合css transform scale的问题

    框架结合css transform scale的问题

    想用该框架制作类似画布的效果 image 当scale到一定值时发现问题,左边溢出的部分并没有被识别到,请问有没有解决方案? image

    opened by a1419735487 3
  • 在ssr环境中会报错~

    在ssr环境中会报错~

    image

    opened by ay233 1
  • Need Help!! maxHeight not working

    Need Help!! maxHeight not working

    i use this plugin on nuxt.js, any solution. the base component always height: 100%. Thank you

    opened by nasirDoe 3
Releases(v4.8.12)
Owner
A place to write codes. https://github.com/wangyi7099
null
null 1 Oct 8, 2021
A vuejs scrollbar component for PC

vue-scrollbar-live pkg.module supported, which means that you can apply tree-shaking in you project 中文文档 A vue scrollbar component, support SSR. repos

志平 刘 11 Oct 12, 2021
a nice scrollbar for vue.js 2.0

vue-nice-scrollbar a nice scrollbar for vue.js 2.0 Demo DEMO Install npm install vue-nice-scrollbar --save Usage import Vue from 'vue' import vue

Burning 14 Jan 22, 2021
The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

Vue Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue Js. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTO

Naufal Rabbani 116 Mar 23, 2021
Smooth scrollbar for Vue.js projects

Vue Smooth Scrollbar Smooth Scrollbar for Vue.js projects. Based on @idiotwu's smooth-scrollbar. Usage 1. Install dependency npm install --save vue-sm

Magisters 31 Aug 12, 2021
A vue component of scrollbar

vue-scrollbar-simple Introduction vue-scrollbar-simple is a vue component of scrollbar Install $ npm install vue-scrollbar-simple --save Usage impo

Zhi Xiong 3 Oct 1, 2021
Handy floating scrollbar component for Vue 3

vue-handy-scroll Handy floating scrollbar component for Vue 3. Synopsis vue-handy-scroll is a component that solves the problem of scrolling lengthy c

null 6 Oct 2, 2021
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.1k Oct 12, 2021
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.1k Oct 19, 2021
Vue directive wrapper for smooth-scrollbar

smooth-vuebar Vue directive wrapper for smooth-scrollbar Demo You can refer to the wrapped library's demo. Why There are many other wrappers for this

Marco 'Gatto' Boffo 25 Aug 16, 2021
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com

??️ Archived & No Longer Maintained I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (ti

null 659 Sep 13, 2021
The virtual responsive crossbrowser scrollbar component for VueJS 2x

VBar The virtual responsive crossbrowser scrollbar component for VueJS 2x DEMO Usage Install Using NPM npm i v-bar Using yarn yarn add v-bar In your .

Luigui Delyer 222 Oct 2, 2021
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 494 Oct 12, 2021
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 52 Aug 12, 2021
A sigle-page scroll plugin based on [email protected],support for mobile and PC .

fullpage-vue A sigle-page scroll plugin based on [email protected],support for mobile and PC . 中文版 overview To achieve sigle-page scroll in mobile, support hori

abelTO 149 Sep 13, 2021
A plugin that checks if element is in viewport

Check if element is in viewport. Vue.js 2 plugin with SSR support without dependencies. DEMO Simple plugin that checks element position on the screen

Vasily Timofeev 108 Sep 23, 2021
vue-check-view - A plugin that checks if element is in viewport. Fast, small, has no dependencies, live demo.

Check if element is in viewport. Vue.js 2 plugin with SSR support without dependencies. DEMO Simple plugin that checks element position on the screen

Vasily Timofeev 108 Sep 23, 2021
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions and events based on the element position on the screen Demo Simple demo page Open your browser console and see what's go

Marco 'Gatto' Boffo 393 Sep 28, 2021
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 494 Oct 12, 2021