🖱️ Vue directive to keep things scrolled to the bottom.

Overview

Installing

Using a package manager (recommended)

The recommended way of installing vue-chat-scroll is using the npm package with the npm (or yarn) package manager:

After installing the package, you must use the vue-chat-scroll plugin :

import VueChatScroll from 'vue-chat-scroll';

Vue.use(VueChatScroll);

new Vue(...);

Using a script tag

If working on a proof of concept or a fiddle, it can be easier to use a script tag. We recommend using a CDN such as unpkg or jsdelvr.

<script src="https://unpkg.com/[email protected]/dist/vue-chat-scroll.js"></script>

vue-chat-scroll will attempt to auto-register itself with Vue. This should work as long as window.Vue is defined.

Usage

We aim to make using vue-chat-scroll as straightforward as possible. Simply using the v-chat-scroll directive should take care of most use cases.

<div v-chat-scroll>
  ...
</div>

You may configure the directive by passing an object as well. For example, the enable configuration flag:

<div v-chat-scroll="{ enable: false }">
  ...
</div>

Please refer to the Config interface and defaultConfig object in config.ts to find out more about what can be configured, as well as what the default configuration values are.

Examples

🧸 Bear with us, all of this is work in progress. We'll be adding some examples of how this plugin can be used to build a fully-featured chat (such as Slack's one), or even a console looking log viewer.

Comments
  • UglifyJs Unexpected Token >

    UglifyJs Unexpected Token >

    After importing vue-chat-scroll, uglifyjs fails in webpack with the following error:

    ERROR in js/vendor.3b917c2.js from UglifyJs
    SyntaxError: Unexpected token: operator (>) [js/vendor.3b917c2.js:202508,27]
    

    It still runs properly, but it's not able to process it, resulting in huge file sizes.

    opened by Async0x42 21
  • Keep focus on previous item when prepending items to the list

    Keep focus on previous item when prepending items to the list

    Is your feature request related to a problem? Please describe. Last week I've created the pull request for the event @v-chat-scroll-top-reached, which works fine. When I'm prepending new items to the list, then the position of the scrollbar still remains on top. Instead the focus should be kept on the previous item that was on top.

    Do you have suggestions how we can solve this problem?

    feature help wanted 
    opened by alex-w0 13
  • Scroll bar doesn't go to bottom on route change

    Scroll bar doesn't go to bottom on route change

    my chat routes may change like this - /conversations#/{user_id} It seems that the scrolling is working fine with a single chat thread. But when changing the route, scroll bar doesn't go to the bottom.

    opened by nowshad-sust 10
  • How to debug if it is loaded?

    How to debug if it is loaded?

    Describe the bug I'm pretty new to vue, sorry.

    I've included this in my package.json then in my main.js after importing vue: import VueChatScroll from "vue-chat-scroll"; Vue.use(VueChatScroll);

    In my component I use <ul v-chat-scroll class="mt2">

    When I load the page and my ul has enough messages to require scrolling, no scroll happens.

    Any tips how to see if it was loaded properly? The only thing I could think of is using v-chat-scroll="true" in the html instead and making sure that property wasn't set in the result (it wasn't). I have the vue chrome devtools addon and poked around some but couldn't see anything.

    There's no console logs or errors.

    Also - I either Vue.use(VueChatScroll) OR include the script in my index.html, right? I tried including the script as well and nothing still happened. There's no vue js script linked in there though. I used the CDN script since I couldn't figure out how to get /dist/vue-chat-scroll.js to work properly via the "npm serve" server (it would just load my app when I tried to access it)

    Thanks!

    bug awaiting reply 
    opened by inspire22 7
  • Scroll on Initialization

    Scroll on Initialization

    Hi, thanks for your work on this plugin.

    I was wondering if it's possible to have the plugin scroll to bottom on initialization? Picture a chat window that already has many chats. Often times, you want to pick up at the most recent part of conversation. And having to scroll down, or wait for new message to scroll is not ideal. Does that make sense?

    opened by dancaron 7
  • use on scrolling console like output

    use on scrolling console like output

    I am displaying console output to trace logs and would like to use to plugin to scroll to the bottom

    However, it doesn't scroll to the bottom. The class output-cmdhas a max-hight set to 300px so there are scrollbars.

        <div>
          <div class='console'>
            <div class='console-inner'>
              <div class='output-cmd' id="cont" v-chat-scroll>
                <pre>
                    <code>
                        {{ logarray.join("\n") }}
                    </code>
                </pre>
              </div>
            </div>
          </div>
        </div>
    
    opened by Vad1mo 6
  •  Failed to resolve directive: chat-scroll - vue v. 2.2.6

    Failed to resolve directive: chat-scroll - vue v. 2.2.6

    I use: in mail.js

    import Vue from 'vue'
    import VueChatScroll from 'vue-chat-scroll';
    Vue.use(VueChatScroll);
    

    in component:

    <div v-chat-scroll="config">
      <div v-for="(comment, key) in comments">
        ...
      </div>
    </div>
    
    ...
     config: {
      always: true
     }
    ...
    

    And i have error

    [Vue warn]: Failed to resolve directive: chat-scroll 
    (found in <Anonymous> - use the "name" option for better debugging messages.)
    
    opened by bigperson 6
  • If I open multiple chat window div it scroll always the first one unnecessarily

    If I open multiple chat window div it scroll always the first one unnecessarily

    I have a facebook like chat system. When I open new chat window, it always scroll again the first window. But it works for all chat window if I send message. Another problem is, how can I scroll by default at the bottom of the div without needing to send a new message? Is there any way to apply this scroll programmatically? It seems, scrolling is applied in updated/watch that's why when data changes it runs. I am not sure. :) Thank you

    opened by hkmsadek 5
  • Scroll methos does not support in Internet explorer 11

    Scroll methos does not support in Internet explorer 11

    I have developed a chat app in laravel and vue js with pusher. It's working proper in all browers but internet explorer is not supporting scroll method. I have installed v-chat-scroll library for scrolling.

    Below mentioned errors occuring in console [Vue warn]: Error in directive chat-scroll inserted hook: "TypeError: Object doesn't support property or method 'scroll'"

    Object doesn't support property or method 'scroll'

    var scrollToBottom = function scrollToBottom(el, smooth) { el.scroll({ top: el.scrollHeight, behavior: smooth ? 'smooth' : 'instant' });

    Here is my package.json file

    { "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.16.2", "bootstrap-sass": "^3.3.7", "cross-env": "^5.0.1", "jquery": "^3.1.1", "laravel-mix": "^1.0", "lodash": "^4.17.4", "vue": "^2.1.10" }, "dependencies": { "babel-polyfill": "^6.26.0", "laravel-echo": "^1.4.0", "pusher-js": "^4.2.2", "v-toaster": "^1.0.3", "vue-chat-scroll": "^1.3.3" } }

    opened by premwebdeveloper 5
  • Prevent scroll down when user has scrolled up

    Prevent scroll down when user has scrolled up

    Hello,

    I'm using this in a chat app to scroll to the bottom of a div when a new message is received. The problem is if the user has scrolled up within the div (to view older messages), then when they receive a new message it automatically scrolls to the bottom, which is annoying. Could an option be added for it to only scroll down, if the user hasn't scrolled up?

    Thanks!

    opened by RMK147 5
  • How to  stop scrolling of the chat to the top and putting the chat message in the current postion after typing load more in the top

    How to stop scrolling of the chat to the top and putting the chat message in the current postion after typing load more in the top

    problem description I have created a chat where it load only 20 message . and if i scroll to top we will see the load more button which will load more 20 message but it directly reach to the top . how can we stop scrolling the chat to top and make it stay in the current position

    awaiting reply 
    opened by ghost 4
  • build(deps-dev): bump semantic-release from 17.0.4 to 19.0.3

    build(deps-dev): bump semantic-release from 17.0.4 to 19.0.3

    Bumps semantic-release from 17.0.4 to 19.0.3.

    Release notes

    Sourced from semantic-release's releases.

    v19.0.3

    19.0.3 (2022-06-09)

    Bug Fixes

    • log-repo: use the original form of the repo url to remove the need to mask credentials (#2459) (58a226f), closes #2449

    v19.0.2

    19.0.2 (2022-01-18)

    Bug Fixes

    • npm-plugin: upgraded to the stable version (0eca144)

    v19.0.1

    19.0.1 (2022-01-18)

    Bug Fixes

    • npm-plugin: upgraded to the latest beta version (8097afb)

    v19.0.0

    19.0.0 (2022-01-18)

    Bug Fixes

    • npm-plugin: upgraded to the beta, which upgrades npm to v8 (f634b8c)
    • upgrade marked to resolve ReDos vulnerability (#2330) (d9e5bc0)

    BREAKING CHANGES

    • npm-plugin: @semantic-release/npm has also dropped support for node v15
    • node v15 has been removed from our defined supported versions of node. this was done to upgrade to compatible versions of marked and marked-terminal that resolved the ReDoS vulnerability. removal of support of this node version should be low since it was not an LTS version and has been EOL for several months already.

    v19.0.0-beta.2

    19.0.0-beta.2 (2022-01-17)

    Bug Fixes

    • npm-plugin: upgraded to the beta, which upgrades npm to v8 (f634b8c)

    ... (truncated)

    Commits
    • 58a226f fix(log-repo): use the original form of the repo url to remove the need to ma...
    • 17d60d3 build(deps): bump npm from 8.3.1 to 8.12.0 (#2447)
    • ab45ab1 chore(lint): disabled rules that dont apply to this project (#2408)
    • ea389c3 chore(deps): update dependency yargs-parser to 13.1.2 [security] (#2402)
    • fa994db build(deps): bump node-fetch from 2.6.1 to 2.6.7 (#2399)
    • b79116b build(deps): bump trim-off-newlines from 1.0.1 to 1.0.3
    • 6fd7e56 build(deps): bump minimist from 1.2.5 to 1.2.6
    • 2b94bb4 docs: update broken link to CI config recipes (#2378)
    • b4bc191 docs: Correct circleci workflow (#2365)
    • 2c30e26 Merge pull request #2333 from semantic-release/next
    • 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] 0
  • build(deps): bump trim-off-newlines from 1.0.1 to 1.0.3

    build(deps): bump trim-off-newlines from 1.0.1 to 1.0.3

    Bumps trim-off-newlines from 1.0.1 to 1.0.3.

    Commits
    • c3b28d3 1.0.3
    • 6226c95 Merge pull request #4 from Trott/fix-it-again
    • c77691d fix: remediate ReDOS further
    • 76ca93c chore: pin mocha to version that works with 0.10.x
    • 8cd3f73 1.0.2
    • fcbb73d Merge pull request #3 from Trott/patch-1
    • 6d89476 fix: update regular expression to remove ReDOS
    • 0cd87f5 chore: pin xo to latest version that works with current code
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by trott, a new releaser for trim-off-newlines since your current version.


    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] 0
  • build(deps): bump tar from 4.4.13 to 4.4.19

    build(deps): bump tar from 4.4.13 to 4.4.19

    Bumps tar from 4.4.13 to 4.4.19.

    Commits
    • 9a6faa0 4.4.19
    • 70ef812 drop dirCache for symlink on all platforms
    • 3e35515 4.4.18
    • 52b09e3 fix: prevent path escape using drive-relative paths
    • bb93ba2 fix: reserve paths properly for unicode, windows
    • 2f1bca0 fix: prune dirCache properly for unicode, windows
    • 9bf70a8 4.4.17
    • 6aafff0 fix: skip extract if linkpath is stripped entirely
    • 5c5059a fix: reserve paths case-insensitively
    • fd6accb 4.4.16
    • 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] 0
  • build(deps): bump minimist from 1.2.5 to 1.2.6

    build(deps): bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    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] 0
  • build(deps): bump node-fetch from 2.6.0 to 2.6.7

    build(deps): bump node-fetch from 2.6.0 to 2.6.7

    Bumps node-fetch from 2.6.0 to 2.6.7.

    Release notes

    Sourced from node-fetch's releases.

    v2.6.7

    Security patch release

    Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th party host while a redirect occurred

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.6...v2.6.7

    v2.6.6

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.5...v2.6.6

    v2.6.2

    fixed main path in package.json

    v2.6.1

    This is an important security release. It is strongly recommended to update as soon as possible.

    See CHANGELOG for details.

    Changelog

    Sourced from node-fetch's changelog.

    Changelog

    All notable changes will be recorded here.

    The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

    What's Changed

    New Contributors

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v3.1.0...v3.1.2

    3.1.0

    What's Changed

    ... (truncated)

    Commits
    • 1ef4b56 backport of #1449 (#1453)
    • 8fe5c4e 2.x: Specify encoding as an optional peer dependency in package.json (#1310)
    • f56b0c6 fix(URL): prefer built in URL version when available and fallback to whatwg (...
    • b5417ae fix: import whatwg-url in a way compatible with ESM Node (#1303)
    • 18193c5 fix v2.6.3 that did not sending query params (#1301)
    • ace7536 fix: properly encode url with unicode characters (#1291)
    • 152214c Fix(package.json): Corrected main file path in package.json (#1274)
    • b5e2e41 update version number
    • 2358a6c Honor the size option after following a redirect and revert data uri support
    • 8c197f8 docs: Fix typos and grammatical errors in README.md (#686)
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by endless, a new releaser for node-fetch since your current version.


    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] 0
Releases(v2.0.0-alpha.4)
  • v2.0.0-alpha.4(Apr 22, 2020)

  • v1.4.0(Apr 7, 2020)

    Added

    • notSmootOnInit configuration parameter (@Wiskyt) (#57)
    • Emit v-chat-scroll-top-reached event when top reached (@alex-w0) (#56)
    • enabled configuration parameter (@theomessin) (#59)

    Changed

    • Build tools updated to latest rollup + babel (please let me know if this breaks something!) (#60)
    Source code(tar.gz)
    Source code(zip)
A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

Carlos González 20 Sep 27, 2021
👁 Declarative Vue component that emits an event when scrolled into view

vue-visibility-trigger Vue component that emits an event when scrolled into view Installation Install the package from npm by running $ yarn add vue-v

William Lindvall 5 May 30, 2021
Top bar indicating amount of content scrolled

Scrol indicator for vue.js apps Demo See DEMO here Install Run npm install vue-content-scroll-progress --save Usage Add in the component import MyScro

Mikhail Kuznetcov 25 Jul 30, 2022
A Vue.js 2.0 directive for vue component. Load more data when scroller arrived end.

A Vue.js 2.0 directive for vue component. Load more data when scroller arrived end.

Huabin Wang 6 Aug 17, 2020
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Oct 1, 2022
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 30 Sep 18, 2022
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 57 Mar 2, 2022
A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令)

vue-stickto 简体中文 A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令) Online Demo Here Install npm install

zhaoyenb 53 May 19, 2021
A tiny Vue directive that stop propagation scroll when edge reached

vue-scroll-stop A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events ✅ On ❌

Volodymyr Antoniuk 41 Feb 4, 2022
(🗃️ 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 655 Sep 22, 2022
A vue directive to make a scrollable element scroll by draging to the scroll direction

vue-dragscroll vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" st

null 223 Sep 9, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 181 Aug 30, 2022
A Vue directive to lock the body scroll without stopping the target element from scrolling

A Vue directive to lock the body from scrolling without stopping the target element from scrolling

Bram Honingh 30 Jul 10, 2022
A Vue directive to wrap @jlmake's excellent ScrollReveal library.

vue-scroll-reveal A Vue directive to wrap @jlmakes' excellent ScrollReveal library. The directive exposes reset, nodesktop, and nomobile as modifiers

James 160 Oct 6, 2022
Scroll-lock directive for vue.js(2.0)

Scroll-lock directive for vue.js(2.0)

amipei 1 Apr 1, 2020
A Vue.JS plugin directive to remember element scroll-position when detached

A Vue.JS plugin directive to remember element scroll-position when detached Problem If a DOM fragment is removed from the DOM and t

Mark Hahn 50 Jun 25, 2021
A vue directive to scroll anywhere on a container (horizontally or vertically)

vue-autoscroll A vue directive to scroll anywhere on a container (horizontally or vertically)

null 7 May 22, 2021
A Vue.js directive to add a class to an based on vertical scroll

A Vue directive to easily add and remove a class from an element when the screen is scrolled past a given point

Jase Pellerin 6 Jan 8, 2020
A vue directive that accepts a threshold value and a callback function that tells you if current scroll position is before the binded element, after element and inside the threshold or past the threshold

A vue directive that accepts a threshold value and a callback function that tells you if current scroll position is before the binded element, after element and inside the threshold, or past the threshold

javad mnjd 0 Jun 30, 2022