Small JavaScript Library To Scroll Content with Mouse Drag – dragscroll

Preview:

Description:

dragScroll is a small JavaScript library that enables you to use mouse drag to scroll content in both direction.

Basic usage:

Download and import the dragscroll.js in your web page.

<script src="dragscroll.js"></script>

Wrap your long content into the container with the CSS class of ‘dragscroll’ .

<div class=dragscroll>
  ...
</div>

Make the container scrollable.

.dragscroll {
  border: 1px solid rgb(31, 40, 49);
  background-color : #283849;
  overflow: auto;
  width: 270px;
  height: 380px;
  padding: 20px;
  cursor : -webkit-grab;
  cursor : -moz-grab;
  cursor : -o-grab;
  cursor : grab;
  margin: 30px auto;
  color: #fff;
}

Change the cursor style as you drag/scroll the scrollable area.

.dragscroll:active {
  cursor : -webkit-grabbing;
  cursor : -moz-grabbing;
  cursor : -o-grabbing;
  cursor : grabbing;
}

Changelog:

v0.0.8 (07/05/2018)

• Update