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