vue-chat-scroll

WebJar for vue-chat-scroll

License	MIT
GroupId	org.webjars.npm
ArtifactId	vue-chat-scroll
Last Version	1.3.5
Release Date	Feb 13, 2019
Type	jar
Description	vue-chat-scroll WebJar for vue-chat-scroll
Project URL	http://webjars.org
Source Code Management	https://github.com/theomessin/vue-chat-scroll

Download vue-chat-scroll

Filename	Size
vue-chat-scroll-1.3.5.pom
vue-chat-scroll-1.3.5.jar	8 KB
vue-chat-scroll-1.3.5-sources.jar	22 bytes
vue-chat-scroll-1.3.5-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vue-chat-scroll/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vue-chat-scroll</artifactId>
    <version>1.3.5</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/vue-chat-scroll/
implementation 'org.webjars.npm:vue-chat-scroll:1.3.5'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/vue-chat-scroll/
implementation ("org.webjars.npm:vue-chat-scroll:1.3.5")

Apache Buildr

'org.webjars.npm:vue-chat-scroll:jar:1.3.5'

Apache Ivy

<dependency org="org.webjars.npm" name="vue-chat-scroll" rev="1.3.5">
  <artifact name="vue-chat-scroll" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='vue-chat-scroll', version='1.3.5')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "vue-chat-scroll" % "1.3.5"

Leiningen

[org.webjars.npm/vue-chat-scroll "1.3.5"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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.

<script src="https://cdn.jsdelivr.net/npm/vue-chat-scroll/dist/vue-chat-scroll.min.js"></script>

Usage

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

<ul class="messages" v-chat-scroll>
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>

Prevent scroll down when user has scrolled up & smooth scrolling

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

<ul class="messages" v-chat-scroll="{always: false, smooth: true}">
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>

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

<ul class="messages" v-chat-scroll="{smooth: true, notSmoothOnInit: true}">
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>

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

<ul class="messages" v-chat-scroll="{always: false, smooth: true, scrollonremoved:true}">
  <li class="message" v-for="n in messages">{{ n }}</li>
  <li v-if="loading">&bull;&bull;&bull;</li>
</ul>

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.

<ul class="messages" v-chat-scroll="{always: false, smooth: true, scrollonremoved:true, smoothonremoved: false}">
  <li class="message" v-for="n in messages">{{ n }}</li>
  <li v-if="loading">&bull;&bull;&bull;</li>
</ul>

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.

<ul class="messages" :v-chat-scroll="{enabled: enabled}">
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>

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.

<ul class="messages" v-chat-scroll="{always: false}" @v-chat-scroll-top-reached="customMethod">
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>

Versions

Version
1.3.5 Feb 13, 2019