Drag to scroll

User often uses the mouse to scroll in a scrollable container. In addition to that, some applications also allow user to scroll by dragging the element. You can see that feature implemented in a PDF viewer, Figma and many more.

This post shows you a simple way to archive that feature with vanilla JavaScript.

Assume that we have a scrollable container as below:

The element must have at least two CSS properties:

The cursor: grab indicates that the element can be clicked and dragged.

Scroll to given position

As long as the element is scrollable, we can scroll it to given position by setting the scrollTop or scrollLeft property:

Drag to scroll

The implementation is quite straightforward. By using the similar technique in the Make a draggable element post, we start with handling the mousedown event which occurs when user clicks the element:

pos stores the current scroll and mouse positions. When user moves the mouse, we calculate how far it has been moved, and then scroll to the element to the same position:

Good practice

As you see above, the left , top , x , and y properties are related to each other. It’s better to encapsulate them in a single variable pos instead of creating four variables.

Last but not least, we can improve the user experience by setting some CSS properties when user starts moving the mouse:

These CSS properties are reset when the mouse is released:

Drag to scroll windows

Lightweight drag to scroll carousel for Angular

You can get it on npm.

This project needs Angular 5+ as dependencies though.

You’ll need to add DragScrollModule to your application module.

Add the drag-scroll attribute to a scrollable element:

That’s it! Now you can scroll it by dragging.

If you want to group items into a carousel, you will need to add drag-scroll-item to the carsousel items.

Name	Type	Description	Default
scrollbar-hidden	@Input	Whether the scroll bar for this element is hidden.	false
drag-scroll-disabled	@Input	Whether all draging and scrolling events is disabled.	false
drag-scroll-x-disabled	@Input	Whether horizontally dragging and scrolling events is disabled.	false
scroll-x-wheel-enabled	@Input	Whether scrolling horizontally with mouse wheel is enabled	false
drag-scroll-y-disabled	@Input	Whether vertically dragging and scrolling events is disabled.	false
drag-disabled	@Input	Whether draging is disabled.	false
snap-disabled	@Input	Whether snapping is disabled.	false
snap-offset	@Input	Pixels of previous element to show on snap or moving left and right.	0
snap-duration	@Input	Duration of snap animation in milliseconds.	500
reachesLeftBound	@Output	Whether reaching the left carousel bound.	n/a
reachesRightBound	@Output	Whether reaching the right carousel bound.	n/a
dragStart	@Output	Executes when drag start.	n/a
dragEnd	@Output	Executes when drag end.	n/a
snapAnimationFinished	@Output	The snap animation for the new selection has finished.	n/a
indexChanged	@Output	Executes when the current index of the carousel changes.	n/a
dsInitialized	@Output	Executes when the drag scroll component has been initialized.	n/a

Name	Type	Description	Default
drag-disabled	@Input	Whether draging on the item is disabled.	false

Add navigation button

Clone the repository, and run npm install , npm run build ngx-drag-scroll , npm start . The demo app will starts on port :4200. I usually do my development on the demo app.

I’ll accept pretty much everything so feel free to open a Pull-Request.

We use commitlint for managing our commits. Check out Contributing for more details.

DragToScroll — Universal Drag & Fling/Flick Scrolling

250 kB) I may post updates or new info below, but this first post will always contain the updated ‘trunk’ version. Check back here for updates! Enjoy, and Let me know if you have any questions.

Thanks to the recent contributors & those reporting bugs. It’s really satisfying to see a little project like this continue to grow, and to see people are finding use in it. Please feel free to post questions or ideas; i’d love to hear them!

[*:19ebmxny] DragDelay is the minimum time to hold RButton before scrollingIncrease this value if you are having trouble getting normal behavior out of the button; this allows you more time to click and release, which sends the normal click behavior.[*:19ebmxny] Confine to target immediately stops drag/scrolling if mouse leaves target window or control
[*:19ebmxny] Changing the Scroll Method may yield different results with different applications; see below for more on the scroll method.
[*:19ebmxny] SpeedY/SpeedX globally adjusts speed of scrolling. 1.0 is default, .5 would slow scrolling by 50%, 1.5 would increase by 50%.
[*:19ebmxny] New Feature: Momentum!Recent updates adds momentum to your dragging and scrolling. If you drag with sufficient speed and release the mouse, the window will scroll slowly to a stop. I’m pretty pleased with the results, and am kind of surprised I hadn’t thought of it before. I’ve been working on & using momentum for the past few days, and think I have the settings in a place that feels fluid and easy to use; you may still wish to adjust the Inertia or StopSpeed. To work properly & fluidly, I was also forced to change the DragThreshold to 0, instead of the previous chunking behavior with 5. This means that overall, scrolling should be smoother (specifically with the default WheelMessage mode), but now you can drag so slow as to not scroll at all; feel free to adjust it.

Momentum does not work well with Smooth Scrolling; a feature found in both FireFox and IE. Smooth Scrolling is generally processor intensive and can cause slow scrolling on older machines, webpages with lots of video, etc. This script sends a lot of scroll messages, which can yield sluggish results. This may just be related to CPU power, but I always disable smooth scrolling anyway; I’d recommend you do the same, in your webbrowser options menu [*:19ebmxny] UseMovementCheck will only start the drag if you click-hold and move the mouse. Clicking and holding while stationary will simply hold the binding button down.
[*:19ebmxny] Settings & per-app settingsDragToScroll saves your settings in an INI file, so that your preferences are persisted between versions of the script.
DtS also allows you to customize these settings for individual applications, meaning you can bring compliance to non-standard apps, or enable features only for specific applications.[/list]

v1.0 Jun.28.2010
[*:19ebmxny] First release
[*:19ebmxny] Adds simple scroll acceleration to mirror mouse move speed

v1.1 Jun.30.2010
[*:19ebmxny] General Cleanup, Efficiency improvements
[*:19ebmxny] Better scroll implemetations, full choice of method
[*:19ebmxny] Added scrolling by WM_MOUSEWHEEL

v1.2 Jul.1.2010
[*:19ebmxny] Updated options menu
[*:19ebmxny] Increased precision in WM_MOUSEWHEEL
[*:19ebmxny] Added Nonlinear acceleration

v1.3 Jul.09.2010
[*:19ebmxny] Adds separable settings for vertical and horizontal scroll methods
[*:19ebmxny] New defaults: WheelMessage for Vertical, ScrollMessage for Horizontal
[*:19ebmxny] Better compatibility for horizontal scrolling

v1.5 Sept.15.2010
[*:19ebmxny] Code & docs cleanup, formatting fixes
[*:19ebmxny] Clean up, and inclusion of recent contributions (thanks all!)
[*:19ebmxny] Enable/Disable scrolling
[*:19ebmxny] User-defined RButton double-click action
[*:19ebmxny] Timer based hotkey activation
[*:19ebmxny] Tray Icons, if set & they exist
[*:19ebmxny] Edge Scrolling
[*:19ebmxny] Usage of ‘Critical’ hotkeys should finally end unintended drag-sticking

v1.6 Sept.17.2010
[*:19ebmxny] Bugfixes & Cleanup
[*:19ebmxny] Edge Scrolling update; works with all windows, not just active
[*:19ebmxny] Added Scrolling Momentum!!

v1.7 Sept.21.2010
[*:19ebmxny] Now Includes embedded icons
[*:19ebmxny] Update to the tray menu
[*:19ebmxny] Invertable drag

v1.8 Oct.11.2010
[*:19ebmxny] Toggle slow mode (new double-click action)
[*:19ebmxny] Configurable selection of Hotkey
[*:19ebmxny] Movement Checking

v1.9 Oct.20.2010
[*:19ebmxny] Rolls up beta releases & new features
[*:19ebmxny] Lots of bugfixes and cleanup
[*:19ebmxny] «Full» disable
[*:19ebmxny] User Settings saved in INI
[*:19ebmxny] Per-App customizations

v2.0 Oct.21.2010
[*:19ebmxny] Automatic update check
[*:19ebmxny] Retroactive version numbers (yay)
[*:19ebmxny] Menu item for opening settings INI
[*:19ebmxny] Adds more per-app settings

v2.1 Oct.27.2010
[*:19ebmxny] Automatic activation of windows for WheelKey method
[*:19ebmxny] Able to «catch» the scrolling window and re-drag
[*:19ebmxny] Supports infinite momentum (i.e. zero friction)
[*:19ebmxny] Per-app settings : invert drag
[*:19ebmxny] Per-app settings : full .exe process path (WinXP or later)
[*:19ebmxny] Tweak of default settings and app polish
[*:19ebmxny] Now Includes compiled version

v2.2 Nov.04.2010
[*:19ebmxny] New Settings GUIs
[*:19ebmxny] Reworking of settings and menus
[*:19ebmxny] Limits Update Check trips during reload

v2.3 Feb.15.2011
[*:19ebmxny] NEW Gesture support for flicking, scrolls one page
[*:19ebmxny] NEW Change the cursor while dragging
[*:19ebmxny] Bugfix in Momentum while using InvertDrag
[*:19ebmxny] Update to widen All Settings GUI; getting too tall.

v2.4 Apr.08.2011
[*:19ebmxny] Updated Gesture Defaults — Back/Forward for browsers, Adobe Reader
[*:19ebmxny] Compatibility fixes — FFX4, VS2010, Apps w/o control IDs
[*:19ebmxny] Bugfix in mouse cursor changing
[*:19ebmxny] Highlighting for non-default values in All-Settings

Enable click-and-drag scrolling in Windows 8 / Metro?

In Windows 8 (Metro interface) I find myself trying to click and drag the background to scroll again and again, which does not work (I’m using a mouse, not touch). Also, scrolling with the scroll wheel, the bottom scrollbar, or the cursor keys is not nearly as smooth as I’ve seen in videos, or on tablets.

Is there any way to enable smooth kinetic scrolling with the mouse? So that I can click and drag lists or multi-screen displays around?

I remember seeing this in a video. I’m not sure if there was some third-party tool involved or not.

3 Answers 3

I’m not sure if I’m understanding the question, but for me the scroll wheel scrolls left to right very smoothly. I assumed you are wanting this to work on the start screen. Is it possible your scroll wheel settings are at issue? I will say when I first started using Win8, I found myself trying to click and drag quite often.

I just tried click and drag in IE10 in Windows 8 release preview and was able to execute click and drag. Maybe I misunderstood your question? I posted a screenshot of my click and drag with a mouse. I don’t remember trying the click and drag in the developer preview. Which Windows 8 are you using? Release Candidate? Developer?

There is an Autohotkey solution to this. It can emulate scrolling in a way similar to what you describe. I have made a script which emulates dynamic scrolling with mouse movement. Here is github link with thorough description and how-to:
https://github.com/Mikhail22/drag-scroll—autohotkey

I’ve been using it for 2 years, it’s stable and well tested. I must say it is very comfortable, definitely way better than the wheel. I just can’t live without it now. Some apps may scroll worse than others though. For example in Notepad++ it lags a bit, OTOH Firefox with enabled smooth scrolling feels perfect.

Note that it binds scroll mode to the right mouse button — it is best option I could find so far. Follow the link for more info.

Scroll the page on drag with jQuery

I have tried using kinetic.js and the code below, however when I try this in IE11 it keeps jumping to the top every time I scroll:

I want to make the page scrollable on tablets and IE10 and 11 so that users can just push the page up to scroll down as you would on mobile devices.

How can I do this in pure-JS or jQuery without it jumping to the top?

7 Answers 7

You can do this quite simply by recording the position of the mouse when clicked, and the current position when being dragged. Try this:

To prevent text selection while dragging, add the following CSS:

Update

Here’s an version of the above as a jQuery plugin, extended to allow both vertical and horizontal scrolling via the settings. It also allows you to change the cursor that’s used too.

I just like to add. Using Rory’s code I made horizontal scrolling.

This code will work on horizontal and vertical mouse drag scroll. It’s pretty simple.

Base on Rory McCrossan’s idea, implemented with AngularJS2.

Based on the first answer, this is the code for horizontal scroll on mouse drag:

I modified Rory’s code quite a bit, and I got per-element side scrolling to work. I needed that for a project that had multiple scrollable tiles in a single view for a webapp. Add the .drag class to any element, possibly do a bit of styling, and it should be good to go.

Again, I had no use for vertical scrolling but it would be pretty simple to add (replace X’s with Y’s, scrollTop() instead of scrollLeft() , etc). Hope this helps someone in the future!

This framework is written in vanilla javascript, and worked best for me.