Handy floating scrollbar component for Vue 3

Related tags

component vue scrollbar
Overview

vue-handy-scroll

Handy floating scrollbar component for Vue 3.

Synopsis

vue-handy-scroll is a component that solves the problem of scrolling lengthy content horizontally when that content doesn’t fit into the viewport. It creates a scrollbar which is attached at the bottom of the scrollable container’s visible area and which doesn’t get out of sight when the page is scrolled, thereby making horizontal scrolling of the container much handier.

💡 Tip: If you are looking for a standalone dependency-free module with the same functionality, please check out the sibling project handy-scroll instead.

Installation

vue-handy-scroll is available on npm, so you may add it to your project as usual:

npm install vue-handy-scroll

After that you may import the component in your app:

import HandyScroll from "vue-handy-scroll";

If you don’t use module bundlers but instead prefer using the component directly in a browser, you may add the component on your page through some CDN such as jsDelivr or unpkg. E.g.:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-handy-scroll/dist/handy-scroll.umd.min.js"></script>

or

<script src="https://unpkg.com/[email protected]^3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-handy-scroll/dist/handy-scroll.umd.min.js"></script>

Usage

Component registration

You can register the component for your app either globally

import HandyScroll from "vue-handy-scroll";

let app = Vue.createApp({...})
app.component("handy-scroll", HandyScroll);

or locally

import HandyScroll from "vue-handy-scroll";

let app = Vue.createApp({
  components: {
    "handy-scroll": HandyScroll
  }
});

Adding the component in templates

Add the component in your templates as follows:

<HandyScroll>
  <!-- Place horizontally wide contents here -->
</HandyScroll>

or (in DOM templates):

<handy-scroll>
  <!-- Place horizontally wide contents here -->
</handy-scroll>

Updating scrollbar

If the layout of your web page may dynamically change, and these changes affect scrollable containers, then you need a way to update the scrollbar every time the container’s sizes change. This can be done by emitting the event update through the event bus provided by the component.

import HandyScroll from "vue-handy-scroll";
// ... some actions which change the total scroll width of the container ...
HandyScroll.EventBus.emit("update", {sourceElement: this.$el});

As demonstrated by the example above, when emitting the event, you may pass a reference to the source element. The component uses this reference to detect which scrollable container is actually affected, and updates only the one that contains the provided source element inside it. If you emit the update event without providing the source element, all instances of the component will be updated.

Custom viewport element

Sometimes, you may want to place the floating scrollbar in a container living in a positioned box (e.g. in a modal popup with position: fixed). To do so, the component needs to be switched to a special functioning mode by specifying the prop custom-viewport:

<HandyScroll :custom-viewport="true">
  <!-- Place horizontally wide contents here -->
</HandyScroll>

The resulting rendered HTML will have the following structure:

<div class="handy-scroll-viewport">
  <!-- slot “viewport-before” -->
  <div class="handy-scroll-body">
    <!-- slot “body-before” -->
    <div class="handy-scroll-area">
      <!-- Horizontally wide contents goes here (slot “default”) -->
    </div>
    <!-- slot “body-after” -->
  </div>
  <!-- slot “viewport-after” -->
</div>

Notice the placement of named slots in this structure (denoted by comments for clarity). You may use them to distribute content as needed. E.g.:

<HandyScroll :custom-viewport="true">
  <template #vieport-before>
    whatever meaningful to be placed between
    “viewport’s” and “body’s” opening tags
  </template>
  <!-- Place horizontally wide contents here -->
</HandyScroll>

The .handy-scroll-viewport element is a positioned block (with any type of positioning except static) which serves for correct positioning of the scrollbar widget. Note that this element itself should not be scrollable. The .handy-scroll-body element is a vertically scrollable block (with overflow: auto) which encloses the target container the floating scrollbar is mounted in.

The component provides some basic styles for elements with classes .handy-scroll-viewport and .handy-scroll-body. Feel free to adjust their styles in your stylesheets as needed (it that case you’ll probably need deep selectors ::v-deep).

“Unobtrusive” mode

You can make the floating scrollbar more “unobtrusive” so that it will appear only when the mouse pointer hovers over the scrollable container. To do so just set the prop unobtrusive to true:

<HandyScroll :unobtrusive="true">
  <!-- Place horizontally wide contents here -->
</HandyScroll>

Live demos

Check out live usage examples here.

You may also find useful this vue-handy-scroll Pen Collection on Codepen.

Issues
  • Bump pug-code-gen from 2.0.2 to 2.0.3

    Bump pug-code-gen from 2.0.2 to 2.0.3

    Bumps pug-code-gen from 2.0.2 to 2.0.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • 引入vue2.6.10版本报错

    引入vue2.6.10版本报错

    handy-scroll.esm.js?37b7:192 Uncaught TypeError: Object(...) is not a function

    const _withId = /#PURE/withScopeId("data-v-71ecdf2e");报错行

    help wanted 
    opened by jiangxu1224 1
  • Bump postcss from 8.2.9 to 8.2.10

    Bump postcss from 8.2.9 to 8.2.10

    Bumps postcss from 8.2.9 to 8.2.10.

    Release notes

    Sourced from postcss's releases.

    8.2.10

    Changelog

    Sourced from postcss's changelog.

    8.2.10

    • Fixed ReDoS vulnerabilities in source map parsing.
    • Fixed webpack 5 support (by Barak Igal).
    • Fixed docs (by Roeland Moors).
    Commits
    • 8395d9f Release 8.2.10 version
    • f2baaa7 Update ESLint config
    • b6f3e4d Fix unsafe regexp in getAnnotationURL() too
    • 4bcd727 Merge pull request #1553 from barak007/patch-2
    • 7c2e97a Add covrage ignore on error paths
    • 8c58434 Apply suggestions from code review
    • ff2fd57 add error for sourcePath
    • 8f02bdc disable url based features
    • a54d020 Fix browser bundling with webpack 5
    • 8682b1e Fix unsafe regexp
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump nth-check from 2.0.0 to 2.0.1

    Bump nth-check from 2.0.0 to 2.0.1

    Bumps nth-check from 2.0.0 to 2.0.1.

    Release notes

    Sourced from nth-check's releases.

    v2.0.1

    Fixes:

    • Replace regex with hand-rolled parser for nth-expressions (#9) 9894c1d
      • Ensures parsing will always have linear time complexity.

    Internal:

    • chore(ci): Use GitHub Actions, Dependabot (#10) e02b4dd
    • Bump dependencies

    https://github.com/fb55/nth-check/compare/v2.0.0...v2.0.1

    Commits
    • 65e40b0 2.0.1
    • ff63f1d Bump eslint-config-prettier from 6.15.0 to 8.3.0 (#11)
    • ff24c93 Bump jest from 26.6.3 to 27.2.0 (#17)
    • da9d78a Bump @​typescript-eslint/parser from 4.9.0 to 4.31.1 (#18)
    • fa35caf Bump @​types/node from 14.14.10 to 16.9.1 (#16)
    • 5f39402 Bump @​typescript-eslint/eslint-plugin from 4.9.0 to 4.31.1 (#19)
    • a11c0c1 Bump prettier from 2.2.1 to 2.4.0 (#20)
    • 3ddd820 Bump @​types/jest from 26.0.15 to 27.0.1 (#13)
    • 732ab0a Bump ts-jest from 26.4.4 to 26.5.6 (#15)
    • 7efd9da Bump eslint from 7.14.0 to 7.32.0 (#14)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
Releases(v3.0.1)
Vue.js wrapper for perfect scrollbar

vue2-perfect-scrollbar Vue.js minimalistic but powerful wrapper for perfect scrollbar Are you looking compatible version with Vue3 ? check https://git

Adam 247 Oct 11, 2021
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
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
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
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
(🗃️ 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
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Oct 12, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Oct 12, 2021
A vue2 component based on Iscroll

vue-virtual-infinite-scroll a vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh. Ba

Lei Zuo 45 Mar 4, 2021
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 180 Sep 8, 2021
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 180 Sep 8, 2021
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Guillaume Chau 6.1k Oct 13, 2021
Bring your scroll game to the next level!

VueNextLevelScroll - Bring your scroll game to the next level! "Click to scroll" component using the modern Browser API. ?? Features Just one tiny fil

Developmint GbR 49 Mar 2, 2021