Dragscroll is a micro library for drag-n-drop scrolling style

Overview

dragscroll

Dragscroll is a micro JavaScript library (910 bytes minified) which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" style, online demo). It has no dependencies and is written in vanilla JavaScript (which means it works anywhere).

Usage

Download the and unpack distribution, or install it using Bower:

$ bower install dragscroll

or npm:

$ npm install dragscroll

Load the dragscroll.js in a preferable way (that is an UMD module):

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

Add the dragscroll class to a scrollable element:

<div class=dragscroll>
    Big text goes here...
div>

That's it! Now you can scroll it by dragging. You can also add the dragscroll class to the element and drag the whole page.

Keep in mind that now it is not possible to select the content with mouse, so apply the cursor: default; CSS style to prevent confusing the users (or even cursor: grab; in case the content is not a text).

If you add or remove the dragscroll class dynamically, invoke dragscroll.reset() to update the listeners.

You can also add the nochilddrag attribute to a scrollable element, which will only enable drag-scrolling for an element itself, but not for its subchildren. This can be usefull, if you want to enable the scrolling the area by dragging its empty space, but keep the opportunity to select the text (see example).

Follow me on twitter: https://twitter.com/asvd0

Comments
  • Make text selectable if no scrollbar after .reset()

    Make text selectable if no scrollbar after .reset()

    Consider such case:

    User opens page at browser window which is 50% of screen width. Page contains full-width table (100% page width) but it's content not fit horizontally so horizontal scrollbar appears and dragscroll plugin inits. User reveals browser window to fullscreen, table successfully fits page and hasn't horizontall scrollbar anymore. Since table fits now there are no sense to use dragscroll so I do dragscroll.reset() (after resize ends) hoping that all event listeners will be removed and user will be able to select text. But it doesn't. Seems that events are not removed so user not able to select text.

    opened by NeXTs 16
  • Verticall scrolling doesnot work while in a container with horizontal scrolling is encountered

    Verticall scrolling doesnot work while in a container with horizontal scrolling is encountered

    I have two containers : one is parent which scrolls vertically and inside parent there is another horizontal scrolling div. when I reach child container with horizontal scrolling vertical scrolling does not work.

    opened by shankarregmi 9
  • can you make this a chrome extension or a windows.exe

    can you make this a chrome extension or a windows.exe

    Hey developer I really like drag and scroll type of scrolling plz can you make this available on windows 10 too means an .exe would be suffice or a minimum a chrome extension plz

    opened by Droyk 6
  • doesn't work with html5 - <!DOCTYPE html>

    doesn't work with html5 -

    Works fine with just at the top of a file. No longer works when using instead.

    Demo here: http://100wires.com/dragscroll/index1.html http://100wires.com/dragscroll/index3.html

    The only difference between the two is the first line, or

    opened by iateadonut 6
  • Dynamically removing dragscroll from an element

    Dynamically removing dragscroll from an element

    Great library, thanks. I'm trying to dynamically enable/disable dragscroll for an element. Enabling it works fine - I add the 'dragscroll' class and then call dragscroll.reset(). However, removing the class and again calling dragscroll.reset() does not remove the event listeners - the element is still draggable. Any suggestions on how to do this?

    opened by itszacknotzack 5
  • How can I use this package in React project? Thank you

    How can I use this package in React project? Thank you

    I tried to import this package like that import dragscroll from 'dragscroll';, and tried to to use it

    <div className='dragscroll'>
         Blabla
    </div>
    

    However, it is not working. I am new to React, so I don't know what I am doing wrong. Thank you

    opened by scortumee 2
  • Reinit method

    Reinit method

    Hello! I try to use dragscroll with react-based application. I have multiple routes and when dragscroll-allowed route was mounted (directly visited), dragscroll work perfectly. But, when other route mouted before dragscroll-allowed route - dragscroll not worked. What I do wrong or how I can reinit dragscroll?

    opened by epszaw 2
  • Scrolling an element with the entire page

    Scrolling an element with the entire page

    This is very useful. Works great. But I'm trying to do something and it ends up with an element over the element I want to be scrolled, and the element over it is disabling scrolling for the one under.

    Can anyone help me to make it so when I drag on the entire HTML page, a specific element to be scrolled?

    opened by aoueon 2
  • Can I use dragscroll only with middle click ?

    Can I use dragscroll only with middle click ?

    Hi !

    I try to use the dragscroll but only when the user use the middle click of his mouse. I want to prevent the scroll with the left and right click, anny idea of how ?

    Thanks

    opened by unkobweb 1
  • Scroll with right mouse button only

    Scroll with right mouse button only

    I want to be able to only scroll using right mouse button (or double touch on mobile) but I'm not able to find how to configure this.

    How would I achieve this? Or is this not supported?

    opened by JurJean 1
  • Issues with dragscroll, Linux Ubuntu, and Electron?

    Issues with dragscroll, Linux Ubuntu, and Electron?

    So, running Electron 1.3.3 on Ubuntu, dragscroll fails to register while it works just fine on OSX. A very strange occurrence, admittedly, since it works fine with Chrome on Ubuntu (Electron is Chromium based). My code is as follows...

        <div class="mainWindow dragscroll" id="viewer">
            <div id="innerWindow">
                <img id="viewImgOne" draggable="false"/>
                <img id="viewImgTwo" draggable="false"/>
                <div id="bgLoader" class="hidden"></div>
                <div id="loader" class="loader hidden">Loading...</div>
            </div>
        </div>
    
    .mainWindow {
      width: 100%;
      margin-top: 56px;
      overflow: auto;
      img {
        float: left;
        width: 50%;
      }
    }
    

    Images load into the two image elements, and the innerWindow is resized accordingly based on image heights. Any suggestions?

    opened by alice-em 1
  • Not working in an element with Visible overflow

    Not working in an element with Visible overflow

    well, sorry if its a dumb thing/question. im a noob. so im triyn to use the dragscroll with "overflow:visible" element and dosent work.. when i use "overflow: auto" works perfectly. but in this case i really need to use it with visible overflow.

    What im missing?

    opened by invernonacaatinga 0
  • Not working with SVG-Files using object or iframe tag.

    Not working with SVG-Files using object or iframe tag.

    I used dragscroll with svg-Files and there are some annoying issues:

    • It's just working with Firefox. I tested it also with Edge and Opera and it didn't work at all.
    • With Firefox I couldn't drag on the image itself and always needed to click a little bit outside of the graphic.
    • I'm using Vue.js and it seems buggy when I change the view with Vue-Router.
    opened by LucasAppel 0
  • How to add a

    How to add a "Reset" button

    Hi there,

    I've implemented "Zoom out" / "Zoom in" buttons with dragscroll modeled off of [this example] (https://stackoverflow.com/questions/47635341/zooming-in-out-an-image-by-clicking-zoom-buttons-javascript) and I'd like to add a third "Reset" button that brings the image back to initial scale and position.

    Any ideas on how to accomplish this?

    opened by jonathonberlin 0
  • Fix intuitive propagation behavior

    Fix intuitive propagation behavior

    • Add small threshold to begin dragging
    • Don't propagate clicks to scrolled element after movement has reached threshold
      • Useful if you are scrolling something with lots of links or buttons in it
    • Don't propagate mousedown events
      • Useful if you have .dragscrolls embedded in other .dragscrolls

    These changes break current behavior, and add a few more bytes, but it makes the behavior a lot more intuitive to me. Creating the pull request in case it seems more intuitive to anyone else.

    opened by zach-capalbo 3
Releases(v0.0.8)
Owner
Dmitry Prokashev
Front-end development, UI and UX. Discover the most efficient ways of building the interaction between human and computer.
Dmitry Prokashev
Smooth scrolling for the web

iScroll, smooth scrolling for the web iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller. It works on

Matteo Spinelli 12.9k Jan 4, 2023
Stellar.js - Parallax scrolling made easy

Stellar.js PLEASE NOTE: This project is no longer maintained. If parallax scrolling is something you care about, please apply to become a contributor

Mark Dalgleish 4.6k Dec 10, 2022
đŸ›€ Detection of elements in viewport & smooth scrolling with parallax.

Locomotive Scroll Detection of elements in viewport & smooth scrolling with parallax effects. Installation ⚠ Scroll-hijacking is a controversial prac

Locomotive 5.9k Dec 31, 2022
BetterScroll is a plugin which is aimed at solving scrolling circumstances on the mobile side (PC supported already).

BetterScroll is a plugin which is aimed at solving scrolling circumstances on the mobile side (PC supported already).

HuangYi 15.9k Dec 30, 2022
Simple and tiny JavaScript library that adds parallax animations on any images

simpleParallax.js simpleParallax.js is a very simple and tiny Vanilla JS library that adds parallax animations on any images. Where it may be laboriou

Geoffrey 1.5k Jan 3, 2023
Lightweight, vanilla javascript parallax library

RELLAX Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library. Update: Rellax now works on mobile (v1.0.0). Demo Website G

Dixon & Moe 6.7k Dec 30, 2022
🚀 Performance focused, lightweight scroll animation library 🚀

Sal Performance focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript. No dependencies! Sal (Scroll Animatio

Mirek Ciastek 3.4k Dec 28, 2022
Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

lax.js Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. >> DEMO << What's new w

Alex Fox 9.4k Dec 29, 2022
🚀 Scroll Follow Tab is a lightweight javascript library without jQuery, no dependencies.

Scroll Follow Tab is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc. Only 21.7Kb.

Hieu Truong 11 Jun 20, 2022
Make drag-and-drop easier using DropPoint. Drag content without having to open side-by-side windows

Make drag-and-drop easier using DropPoint! DropPoint helps you drag content without having to open side-by-side windows Works on Windows, Linux and Ma

Sudev Suresh Sreedevi 391 Dec 29, 2022
Drag and drop library for two-dimensional, resizable and responsive lists

GridList Drag and drop library for a two-dimensional resizable and responsive list of items Demo: http://hootsuite.github.io/grid/ The GridList librar

Hootsuite 3.6k Dec 14, 2022
Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.

Dropzone is a JavaScript library that turns any HTML element into a dropzone. This means that a user can drag and drop a file onto it, and Dropzone wi

Dropzone 17k Dec 30, 2022
A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech

DFlex 1.5k Jan 8, 2023
Drag and drop library for two-dimensional, resizable and responsive lists

DEPRECATED This project is no longer maintained, please consider using react-grid-layout instead. GridList Drag and drop library for a two-dimensional

Hootsuite 3.6k Dec 14, 2022
Nested Sort is a JavaScript library which helps you to sort a nested list of items via drag and drop.

Nested Sort Nested Sort is a vanilla JavaScript library, without any dependencies, which helps you to sort a nested list of items via drag and drop. U

Hesam Bahrami 40 Dec 7, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till mÀnniskor pÄ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Vanilla javascript (ES6) function enabling drag scrolling on desktop

Drag-n-scroll also on desktop devices, by LCweb No dependencies vanilla javascript function to easily implement a nice drag-to-scroll effect using dse

Luca 2 Apr 5, 2022
Micro.publish is an Obsidian plugin to publish notes directly to Micro.blog, written in TypeScript

Micro.publish Micro.publish is a community maintained plugin for Obsidian to publish notes to a Micro.blog blog. Installing This plugin will be availa

Otavio Cordeiro 14 Dec 9, 2022