Small JavaScript Library To Scroll Content with Mouse Drag – dragscroll

Category: Drag & Drop , Javascript , Recommended | July 5, 2018
Author:asvd
Views Total:8,333 views
Official Page:Go to website
Last Update:July 5, 2018
License:MIT

Preview:

Small JavaScript Library To Scroll Content with Mouse Drag – dragscroll

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

You Might Be Interested In:


Leave a Reply