Utterscroll

Enables dragscroll on your website. It automatically detects when you want to select text, rather than scroll.

Please find a DEMO, here, together with more information on Utterscroll.

You could ask questions or make suggestions by clicking Leave a comment at the bottom of that page (i.e. the demo page). (Or via GitHub.)

Instructions

Requires jQuery, tested with jQuery 1.7.2.

Use like so: (for example)

<script src='jquery-scrollable.js'></script>
<script src='debiki-utterscroll.js'></script>

if (!Modernizr.touch)  // if not a smartphone
  debiki.Utterscroll.enable({
      scrollstoppers: '.CodeMirror, .ui-resizable-handle' });

Utterscroll is disabled inside the scrollstoppers. (It automatically understands to disable itself when you click buttons or select text, so you probably don't need to configure many special scrollstoppers.)

Details

Utterscroll scrolls the closest scrollable element, or the window. However, scrolling anything but the window, depends on a jQuery selector, ':scrollable', being available. Otherwise, the window is always scrolled. So you should also include the file jquery.scrollable.js on your web page (it defines the ':scrollable' selector). That file is an excerpt from jquery-scrollintoview by Robert Koritnik.

As of 2012-05-23, tested with jQuery 1.7.2 and recent versions of Chrome, FF, IE and Opera.

As of 2012-02-29, tested with jQuery 1.6.4 and recent versions of Google Chrome, Firefox and Opera, and IE 6, 7, 8 and 9. (Scrolling the window has been tested; scrolling other elems has not been very thoroughly tested.)

License and Copyright

Copyright (c) 2012 Kaj Magnus Lindberg

Licensed under the GNU Lesser General Public License version 2.1, or (at your option) any later version. See the top of debiki-utterscroll.js and lgpl-2.1.txt and lgpl-3.0.txt and http://www.gnu.org/licenses/.