vue-chat-scroll

by theomessin

theomessin / vue-chat-scroll

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

490 Stars 73 Forks Last release: 7 months ago (v1.4.0) MIT License 38 Commits 6 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

vue-chat-scroll

A plugin for Vue.js 2 that scrolls to the bottom of an element when new content is added within said element. See demo.

Installation

NPM (recommended)

npm install --save vue-chat-scroll
import Vue from 'vue'

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

Simple Script Tag

Just include

dist/vue-chat-scroll.js
after including Vue.
html

Usage

There's nothing you need to do in JavaScript except for installation. To use the plugin, simply use the

v-chat-scroll
directive.
  • {{ n }}

Prevent scroll down when user has scrolled up & smooth scrolling

Alternatively, you can pass a config value to the directive:

  • {{ n }}

Smooth scrolling for updates but not the first time the container comes in view

  • {{ n }}

Scroll with dissapearing elements in chat window (see #30)

If you have a "loading" animation that disappears when you receive a message from an external source, use the

scrollonremoved
option to ensure the scroll will happen after the element has been removed
  • {{ n }}
  • •••

If you want to avoid having smooth scroll in this situation (so it instantly scrolls to bottom after loading), but keep it when new messages come, use the

smoothonremoved
set to
false
, while being able to keep
smooth
set to
true
for later messages.
html
  • {{ n }}
  • •••

This option only applies if

scrollonremoved
is set to
true
. When not defined behavior defaults to
smooth
property.

Disable vue-chat-scroll using configuration prop

You may use the

enabled
configuration property to control
v-chat-scroll
.
  • {{ n }}
data () => {
  enabled: false,
}

Events

  • v-chat-scroll-top-reached Will be triggered when the top of scrollbar is reached. If you are using this event for prepending items to the list then also make sure that the config option always is set to false.
    html
    
    • {{ n }}

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.