Utterscroll — Dragscroll Everywhere

By KajMagnus @user_1452012-04-21 06:54:59.867Z2016-05-03 07:24:42.467Z

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.

  • 6 replies
  1. I need help - how do I use this script

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

    2. In reply touser_145:

      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. 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 :-)

      2. In reply touser_145:

        How do I reduce the scrolling speed?

        1. Hmm, as of right now I think you'd have to fork the GitHub repo and comment out the code that enables acceleration when you scroll-drag large distances.

          Here's the code: https://github.com/debiki/utterscroll/blob/master/debiki-utterscroll.js#L421

          Perhaps this should be a config option.