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 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

  

• Twitter

@wangyi70991

License

MIT By Yves Wang(Wangyi Yi)

4.8.1 (2018-09-03)

Features

• rail: Add gutterOfSide option to rail you can use it to see the (2590c22)

ops: {
  rail: {
    gutterOfEnds: '2px';
  }
}

Rename the gutter in 4.8.0 to gutterOfEnds to distinguish the two kind of gutters.

4.8.0 (2018-09-03)

Bug Fixes

• Correct scroll position when use scrollTo (7a98fb4), closes #51
• Incorrect bar size in sometimes on Edge (b04e62c), closes #52
• rail: After clicking middle of rail doesn't scroll to the center of content (1019063)
• util: Dont't set value for reactive obnject (dbdb846)
• Incorrect children of slots: scroll-content scroll-panel (d82b485)
• Some test cases and use setTimeout to update scroll status (c98ff18)

Features

• rail, bar: Allow to specify border-radius and gutter for bar and rail. (88da4c2)

ops: {
  rail: {
    specifyBorderRadius: '2px'; // Set false to let vuescroll to ajust automatically
  }
}

4.7.5 (2018-08-21)

Bug Fixes

• Correct scroll position when use scrollTo (7a98fb4), closes #51
• Incorrect bar size in sometimes on Edge (b04e62c), closes #52
• Some test cases and use setTimeout to update scroll status (c98ff18)
• rail: After clicking middle of rail doesn't scroll to the center of content (1019063)

Breaking Changes

• Remove scrollContent in options and put padding to scrollPanel

Refactor

• Remove scrollContent component which only exists in native mode, and merge its part into scrollPanel.

4.7.1-rc.10 (2018-08-05)

Bug Fixes

• add __no-hbar when scrollingX is false (8dca8e3)
• Add children of slot-panel to render list (df417ae)
• Cannot hide native scrollbar in FireFox (208f759)
• files field in package.json (ebe101f)
• Flinker when child size equals parent size (41f33b9)
• Get gutter more accurately (f3392f6)
• Remove import Vue in index.js, move Vue to peerDep (60ef2fc), closes #45

Features

• api: Add scrollingTimes and clearScrollingTimes to control the times you have scrolled (0b7b7e2)
• bar: Merge configurations vBar, hBar, vRail, hRail (dc40aa9)
• config: Add onlyShowBarOnScroll to show bar only when scrolling (e8c3ffe)
• Add typescript for separate modes (d2a1adf)
• Can pass global config via Vue.use (2cd8b12)
• Support SSR (12f5158), closes #42

BREAKING CHANGES

• bar: The vBar, hBar,vRail, hRail are not avilable now. Use rail, bar that works for both vertical and horizontal.

4.7.0 (2018-07-23)

Features

• bar: Merge configurations vBar, hBar, vRail, hRail (dc40aa9)
• Support SSR (12f5158), closes #42

BREAKING CHANGES

• bar: The vBar, hBar,vRail, hRail are not avilable now. Use rail, bar that works for both vertical and horizontal. Relative address

4.6.24 (2018-07-07)

Bug Fixes

• Push load related bug.(2a3cf2c)

4.6.23 (2018-07-07)

Bug Fixes

• Add children of slot-panel to render list (df417ae)
• files field in package.json (ebe101f)

Features

• api: Add scrollingTimes and clearScrollingTimes to control the times you have scrolled (0b7b7e2)
• config: Add onlyShowBarOnScroll to show bar only when scrolling (e8c3ffe)

4.6.22 (2018-07-03)

Features

• config: Add onlyShowBarOnScroll to show bar only when scrolling (e8c3ffe)

4.6.17 (2018-06-29)

Bug Fixes

• A typescript any-imply error.cf87e45

4.6.14 (2018-06-29)

Bug Fixes

• files field in package.json (ebe101f)

• A css related bug, that causes horizontal bar not to show. (7c8858e)

4.6.13 (2018-06-27)

Bug Fixes

• files field in package.json (ebe101f)

4.6.10 (2018-06-27)

Features

• Add typescript support (5dcec90)

4.6.10 (2018-06-26)

Refator

• Tweak the class name of each components.

4.6.8 (2018-06-25)

Features

Slots

• Add scroll-container, scroll-panel, scroll-content

Refactor

• Build scripts

Breaking Changes

• You need to import vuescroll css file now!

4.6.5 (2018-06-11)

Bug Fixes

• use currentTarget to replace target (0611355)

4.6.4 (2018-06-06)

Features

• api: add refresh/refreshAll (ca7b5da)

4.6.1 (2018-06-04)

Features

• add border-radius to rail (1d9f418)

4.6.0 (2018-06-04)

Bug Fixes

• add z-index to rail (6acc2b4)

4.5.33 (2018-06-01)

Bug Fixes

• don't call complete while __isDecelerating is false (ff0f950)

Features

• add direction info for event handle (42153e7)

4.5.32 (2018-05-31)

Bug Fixes

• update bar in setTimeout (#31) (1b4b65d)

Features

• api: add triggerRefreshOrLoad Api that you can trigger refresh or load directly (02fb682)

4.5.31 (2018-05-30)

Bug Fixes

• add min-width to scrollPanel, scrollContent(#32) (8fc54cd)

4.5.30 (2018-05-29)

Bug Fixes

• The content height while push-load is enable (6f170ee)

4.5.29 (2018-05-29)

Bug Fixes

• typo in createPanel.js (40b45d7)

Features

• Support customize slot dom in pull-refresh or push-load (dc94053)

4.5.27 (2018-05-27)

Bug Fixes

• silde-mode: what scroll-panel's display style is inline-block may disrupt content style(d8e0eab), closes [#30]

Features

• bar: Add showDuration to controll the show time of bars (2f21464)

4.5.24 (2018-05-25)

Features

• bar: support dragging in mobile (640bd7b)

4.5.22 (2018-05-24)

Performance Improvements

• bar: refactor bar and rail (706d274)

4.5.21 (2018-05-23)

Bug Fixes

• update bar when mouse enters or moves (7e0d76f)

4.5.19 (2018-05-22)

Bug Fixes

• incorrect bar position when there is a error of scrollHeight in browser (5330cce)

Performance Improvements

• scrollbar: make the position of scrollbar more accurate (50c1ca1)

4.5.18 (2018-05-21)

Bug Fixes

• get incorrect hash when component mounted (6ad69af)

4.5.17 (2018-05-18)

Bug Fixes

• rename comonent to component (d9995b8)
• typo (c19f27d)

Features

• api: Add scrollIntoView api that allows you scroll an elment into view (50a458b)

4.5.13 (2018-05-09)

Bug Fixes

• indent (0c31be8)
• internalscrollTop should default to 0 (418b45a)
• rail's borderradius cannot be dynamiclly set (de6c4c2)
• typo in readme (057dfda)
• typo in readme (6955321)

Features

• api: add preventDefault option (70e1886)

Performance Improvements

• touch: optimize scroll experience (53148ed)

4.5.12 (2018-05-04)

Bug Fixes

• error process when mode is 'slide' (3eaa1ca)
• typo (ff76b39)

Features

• api: add zoomTo, zoomBy, getCurrentviewDom methods (7769099)
• paging: add getCurrentPage, goToPage api for paging in slide mode (a3e2478)

4.5.9 (2018-04-30)

Features

• add zooming options to enable zoom in slide mode or not (ed0e4f3)

4.5.5 (2018-04-28)

Performance Improvements

• set document select none when mouse is clicked (5e24562)

4.5.4 (2018-04-27)

Bug Fixes

• resize event didn't trigger in FireFox (dbb5908), closes #22
• typo (d89ec35)
• typo (11da6a8)

4.5.0 (2018-04-26)

Bug Fixes

• use internalscrollLeft in scrollTo api (003be27)

Features

• add scrollby api (8161055)
• core: add pure-native mode that you can use native scrollbar in vuescroll (8249b5d)

4.1.2 (2018-04-17)

Bug Fixes

• record pos confilt (6250c2b)

4.1.1 (2018-04-17)

Bug Fixes

• a typo error in readme (5f81713)
• add a limit to scroll distance (4c2220b)
• calculate scrollPanel's height wrongly while width isn't overflow (81d7159)
• called function wrongly (fix:#4) (cf89320)
• change condition to hBar instead of vBar (1c88f26)
• dynamic set gutter, use es6 syntax to write code (225c458)
• error calculate content's height (c83a9b5)
• error class name of hiding the bar (ac938f5)
• error correct scrollPanel height (2f9d70e)
• error transform style (ccd620c)
• hide default scrollbar (83a3c48)
• judge if vue._isDestroyed to nextTick (b1f56a6)
• lot of bugs (c6cb5fd)
• options: scrollContent padding not work(fix:#6) (b3d2c87)
• resize window scroll doesn't update (9184bba)
• some bugs (e60f6eb)
• typo (3c5402f)
• typo (f1958d4)
• typo of setting style of scrollPanel (1cb3ecb)

Features

• add mode options (72443a6)
• add native option (699b068)
• add pull refresh (4191c9a)
• add zoom support to non-native mode (d439e4c)
• merge code (d0bfd38)
• rewrite scrollContent and scrollRail to functional components (63f243d)
• sweak core code (6f12e8d)
• sweak the core architecture (9fe86f9)
• sync some feature between vuescroll and scroller (5bae654)
• update (a11cc79)
• use jsx (90f3139)