— efficient discussions
Please consider upgrading to a newer version of Internet Explorer (or install Google Chrome, it's even faster).

Utterscroll — Dragscroll Everywhere

By KajMagnus3 years ago, edited a month ago by various people.

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.

<!-- - It tries not to interfere with text selection, links and buttons, so you can (hopefully) enable it on any page, with little configuration, or no configuration. — Other scroll scripts require you to manually specify which parts of the page should be scrollable.

Test to alternate between selecting text and scrolling :-)

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

  • It automatically 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.

  • 8 posts
  1. #2Anonymous?2 years ago. 1 person like this comment.

    I need help - how do I use this script

    1. #3KajMagnus2 years ago. 1 person like this comment.

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

    2. In reply toKajMagnus:
      #5urza?a year ago.

      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. #6KajMagnusa year ago, edited a year ago.

        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 toKajMagnus:
        #7Anonymous?5 months ago.

        How do I reduce the scrolling speed?

        1. #8KajMagnus (KajMagnus)5 months ago, edited 5 months ago.

          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.

        You have been logged in, welcome Anonymous!

        Login failed: unknown error