Skip to content

A simple extension for OverlayScrollbars plugin that provides basic chat window behaviour.

License

Notifications You must be signed in to change notification settings

fpdrozd/OverlayScrollbarsChat

Repository files navigation

OverlayScrollbarsChat

OverlayScrollbarsChat is a simple extension for OverlayScrollbars plugin that provides basic chat window behaviour.

Features

  • Eliminates scroll jump when prepending the content (for example old messages in chat box)
  • Scrolls down to appended content (for example new message in chat box)

Download

You can download OverlayScrollbarsChat manually from dist folder or install it via npm:

npm install overlayscrollbarschat --save

Usage

HTML

Include OverlayScrollbarsChat.umd.js to your HTML file (after the OverlayScrollbars!)

<script type="text/javascript" src="path/to/OverlayScrollbars.js"></script>
<script type="text/javascript" src="path/to/OverlayScrollbarsChat.umd.js"></script>

Javascript

document.addEventListener('DOMContentLoaded', function() {
  //Initialize the plugin and get its instance
  const myScrollbar = OverlayScrollbars(document.querySelectorAll('body'), { });

  //Add the extension "OverlayScrollbarsChat" to the plugin instance
  myScrollbar.addExt('OverlayScrollbarsChat');
});

For more details about adding extensions check out this article in official OverlayScrollbars documentation.

Options

option type default description
appendScroll : {
duration number 200 Indicates scroll duration when appending the content.
easing string linear Indicates scroll easing when appending the content.
}

Example

myScrollbar.addExt('OverlayScrollbarsChat', {
  appendScroll: {
    duration: 300,
    easing: 'swing'
  }
});

License

MIT

About

A simple extension for OverlayScrollbars plugin that provides basic chat window behaviour.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published