— for the fruitful conversations Logout
Please consider upgrading to a newer version of Internet Explorer (or install Google Chrome, it's even faster).

Utterscroll — Dragscroll Everywhere

By KajMagnus, 2012-04-21 06:54:59Z, improved by various people, 2013-03-24 02:24:28Z

Do this:

Click and hold left mouse button on the white background, and move the mouse leftwards, upwards (with the mouse button held down).

Then you will scroll the page, using Utterscroll.

What is Utterscroll?

Utterscroll enables dragscroll everywhere on a web page. That is, you can click-and-dragscroll anywhere, instead of using the scrollbars. This should save time, for you and the users of your website, if you scroll long distances or horizontally — then Utterscroll is faster than using the browser scrollbars and the mouse scroll wheel.

How is it different?

Utterscroll differs from other scroll scripts:

  • It understands when you want to select text rather than drag-and-scroll the page. Test to alternate between selecting text and scrolling :-)

  • Little or no configuration: it's enabled on the whole page by default, but it disables itself temporarily, when you click buttons, text inputs, links, etcetera.

  • It's faster than other scroll scripts, when you scroll long distances.

  • Perhaps not unique, but anyway: It works inside nested scrollbars.

Nested scrollbar example.
Click and drag the white background
in this box. But not too close to text.

Why am I Doing This?

I'm developing Utterscroll because:

  1. I'm building a discussion system (demo here) where replies
    are stacked in columns, so pages can become very wide. On these huge pages it's rather awkward to scroll using the horizontal scrollbar and scroll wheel.

  2. The discussion system is a blog or forum hosting service, and people can write their own HTML — so I need a scroll script that works well everywhere, with no configuration.

Related Projects

Here are some related projects that perhaps suit you better.

Leave a comment
4 comments Logout
  1. Reply Like? More
  2. By Anonymous?, 2013-03-21 14:24:45Z#1

    I need help - how do I use this script

    1. By KajMagnus, 2013-03-23 21:52:39Z#2

      You'll find instructions about how to use it at GitHub, here: https://github.com/debiki/utterscroll

  3. By urza?, 2013-12-01 13:17:22Z#4

    It doesnt work. Could you please publish plain simple minimal example on github? Something that can be used as boilerplate. Thanks. I tried to use it as you have in github readme, but it doesnt work. It is probably something obvious and stupid for you, but as I am not web developer I dont know what might be wrong.

    1. By KajMagnus, 2013-12-05 00:16:57Z#5, improved , 2013-12-05 00:17:53Z

      Hi Urza, I just published an example HTML file at GitHub. It's linked to from the GitHub Utterscroll "homepage" too.

      I did find two issues, one related to changes in recent versions of jQuery, and another document.body == null issue that can be worked around by loading Utterscroll at the end of the HTML page. Please see the example file :-)

You have been logged in, welcome Anonymous!

Login failed: unknown error

Be notified via email of replies to your comments?

You can select many rating tags.

You are changing your rating.



Submitting ...

Comments rated interesting, funny
Your post has no ratings, and was therefore placed below.
Comments rated boring, stupid
(Click this box to dismiss)