azoff/overscroll

Touch scrolling for the browser

Overscroll v1.7.7

Wednesday, February 12th, 2014

Overscroll is a jQuery Plugin and polyfill for mobile safari's overflow-scrolling style. It is intended for use on desktop browsers, with the latest version of jQuery.

Homepage: http://azoff.github.io/overscroll/

License

Copyright 2014, Jonathan Azoff

Licensed under the MIT license.

https://github.com/azoff/overscroll/blob/master/mit.license

Usage

$(selector).overscroll({options});

• selector The jQuery selector, targeting an element to apply overscroll to
• options An optional JavaScript object that you may pass if you would like to customize the experience of the overscroll element. Below is a list of properties that you may set on the options object and their respective effect.
  • options.showThumbs {Boolean: true}
    • Designates whether or not to show the scroll-bar thumbs on the scrollable container
  • options.persistThumbs {Boolean: false}
    • Designates whether or not to fade the thumbs in and out
  • options.hoverThumbs {Boolean: false}
    • Designates whether or not to fade the thumbs in and out on hover
  • options.scrollLeft {Integer: undefined}
    • Start the overscrolled element at a particular left offset. Defers to the browser default if not set
  • options.scrollTop {Integer: undefined}
    • Start the overscrolled element at a particular top offset. Defers to the browser default if not set
  • options.direction {String: 'auto'}
    • The scroll direction of the overscrolled element, by default it will auto-detect the available directions. You can also restrict direction by setting this property equal to 'vertical' or 'horizontal'
  • options.cancelOn {String: "select,input,textarea"}
    • An optional jQuery selector to ignore on drag events. Note: must match an element inside the overscrolled element.
  • options.captureWheel {Boolean: true}
    • Designates whether or not to react to mouse wheel events
  • options.wheelDirection {String: 'multi'}
    • The direction scrolled when the mouse wheel is triggered. Options are 'multi' for multi-directional scrolling, 'horizontal' for left/right scrolling, and 'vertical' for up/down scrolling.
  • options.wheelDelta {Number: 20}
    • The amount of drift to apply per mouse wheel 'tick'
  • options.scrollDelta {Number: 5.7}
    • The amount of drift to apply per drag interval
  • options.zIndex {Number: 999}
    • The z-index applied to the thumb elements
  • options.dragHold {Boolean: false}
    • Locks onto the overscrolled element when dragging and doesn't let go when the mouse moves away from it.
  • options.ignoreSizing {Boolean: false}
    • Applies overscroll to the selected element even if it has no area to scroll

$(selector).removeOverscroll();

• Returns an overscrolled element to its pre-overscroll state. This is essentially a deconstructor for overscrolled elements.

Global Settings

Due to popular demand, overscroll also exposes some of its internal constants for advanced tweaking. You can modify any of these settings via jQuery.fn.overscroll.settings, here are the defaults:

jQuery.fn.overscroll.settings = {
    captureThreshold:   3,   // The number of mouse move events before considering the gesture a "drag"
    driftDecay:         1.1, // The linear-friction coefficient for drift decay (must be > 1)
    driftSequences:     22,  // The number of animation frames to constrain a drift to
    driftTimeout:       100, // The amount of time to imply the user is no longer trying to drift (in ms)
    thumbOpacity:       0.7, // The default active opacity for the thumbs
    thumbThickness:     6,   // The thickness, in pixels, of the generated thumbs
    thumbTimeout:       400, // The amount of time to wait before fading out thumbs
}

Events

Apart from regular DOM events, overscrolled elements emit events to capture dragging and drifting boundaries. To listen to these events, simply listen for one of the following events on an overscrolled element:

• overscroll:dragstart
  • The beginning of the drag event, happens when a user drags the overscrolled elemnent
• overscroll:dragend
  • The end of the drag event, happens after the drag, but before the drift
• overscroll:driftstart
  • Happens right after overscroll:dragend, but only if the drag had enough inertia
• overscroll:driftend
  • The end of a drift, happens after the drift effect completes

Here is an example using jQuery's on() method, listening for drag start:

$('#selector').overscroll().on('overscroll:dragstart', function(){ console.log('Drag started!') });

Finer Points

In order to get the most out of this plugin, make sure to only apply it to parent elements that are smaller than the collective width and/or height of their children. This way, you can see the actual scroll effect as you pan the element.

While you can programatically control whether or not overscroll allows horizontal and/or vertical scroll, it is best practice to size the child elements accordingly (via CSS) and not depend on programatic restrictions.

As of 1.3.1, if you would like to add click handlers to links inside of overscroll, you can dynamially check the state of the overscrolled element via the jQuery's data() method. This ability should allow you to prevent default behavior of a click handler if a drag state is detected. For example, an overscrolled jQuery element elm can be checked for drag state via elm.data("overscroll").dragging.

As of 1.4.4, you can call the overscroll constructor on a jQuery element as much as you like, without worrying about memory leaks. What this means is that you may dynamically add elements to the overscrolled element, and then re-call the overscroll method to take into account the new height. This would have been done programatically if DOM Elements supported the resize event, alas only the window object supports this event.

As of 1.7.0, you can scroll in multiple directions using the mouse wheel. You can also disable mouse wheel support.

As of 1.7.4, Overscroll runs on the jQuery 2.x.x variants - hence, older browsers are no longer supported.

Contributing

I <3 pull requests. If you want to contribute, please fork the code and submit a pull request. If you want to take an active role maintaining overscroll, just let me know - I would wholeheartedly appreciate the help.

Support

If you're having problems with using the project, use the support forum at CodersClan.

A Note About AMD

I have no interest in supporting AMD. It seems great and I'm sure lots of people use it. However, its goals seem tangential to making Overscroll a better plug-in. It's hard enough keeping up with browsers, no sense in making Overscroll anything more than what it is: a jQuery plug-in. If you want to turn Overscroll into an AMD module, than I wholly encourage you to do so! Just fork the project and shoot me a link so that I can reference it here!

overscroll's Issues

cancelOn regex expressions

Hi,
I've tried to add regex expressions on cancelOn event but seems that doesn't work.
Example:
cancelOn: 'a[href^="http://"]'
cancelOn: '/http://.\b/'
cancelOn: '((https?|ftp|gopher|telnet|file|notes|ms-help):((//)|(\))+[\w\d:#@%/;$()~?+-=.&]_)'

Will be a good thing to implement so you can choose elements you want to cancel without using a class.

Also, is it corect that scroll doesn't work over youtube html5 video iframe ? (well embed/object elements).

Best regards,
Aurel Tirnovanu

Absolutely Positioned Elements within scrollable area

I've got a blueprint viewer I'm working on. This allows users to align blueprints over one another. I'm using overscroll to allow them to navigate the plans by clicking and dragging the blueprints around. I came across 2 issues.

1. The mouse tends to get stuck in dragging mode. When you click and drag, the mouse doesn't always get released.
2. If the positioned element inside the overscrolled element has a negative positioning (e.g. top: -100, left: -300) you can't view the entire image. Overscroll just stops at the borders (top: 0, left: 0, right: 0, bottom: 0) of the container, and the rest is cut off.

1 seems more like a bug, and 2 seems more like it might be intentional. Is that the case here?

Thanks!

This repo has been included in The Github Pirates

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

Thumbs Scaling Issue

The Thumbs do not scale with div changes. The thumbs remain fixed to the original dimensions.

Defer Click Fix

Hi Azoff,

first of all, great work on this. I have had an issue with the click event handling, though. I was able to solve it, so I wanted to share for future releases. Here goes:

deferClick: function(target) {
    var events = target.data('events');
    if (events && events.click && events.click.length) {
        events = events.click.slice();
        target.unbind('click').one('click',
        function(event) {
            event.preventDefault(); - >event.stopPropagation(); - >event.stopImmediatePropagation();
            $.each(events,
            function(i, event) {
                target.click(event);
            });
        }); - >
    } else { - >target.one('click',
        function(event) { - >event.preventDefault(); - >event.stopPropagation(); - >event.stopImmediatePropagation(); - >
        }); - >
    }
},

I marked all new lines with -> arrows. To explain: I am using your script in combination with jqGrid. It allows you to select rows by clicking. The click event however is not on the dragging element (e.g. the ) but on the parent (). The previous code would only prevent click events for the element itself and reattach any previously detached click events. My extension always defers the click event, and stops propagation, so the click event won't be fired on parent elements.

Hope this helps.

Add z-index for thumbs to options

I have a situation where I'm using overscroll to scroll an area on the main page. There are items in this area that open a jQuery UI dialog, that needs to sit above the scrollbars, so I parameterized its z-index accordingly. Now I also need to use overscroll inside this dialog, but the thumbs won't show, since they have a fixed z-index below the dialog.

Unified diff of required changes:

@@ -91,7 +92,8 @@
                 wheelDelta: o.constants.wheelDelta,
                 scrollDelta: o.constants.scrollDelta,
                 direction: 'multi',
-                cancelOn: ''
+                cancelOn: '',
+                zIndex: 999
             }, options);

             // check for inconsistent directional restrictions
@@ -132,13 +135,13 @@
                     data.thumbs = {};

                     if (data.sizing.container.scrollWidth > 0 && options.direction !== 'vertical') {
-                        data.thumbs.horizontal = $(o.div).css(o.getThumbCss(data.sizing.thumbs.horizontal))
+                        data.thumbs.horizontal = $(o.div).css(o.getThumbCss(data.sizing.thumbs.horizontal, data.options.zIndex))
                                     .css({ opacity: options.persistThumbs ? o.constants.thumbOpacity : 0 });
                         target.prepend(data.thumbs.horizontal);
                     }

-                    if (data.sizing.container.scrollHeight > 0 && options.direction !== 'horizontal') {
-                        data.thumbs.vertical = $(o.div).css(o.getThumbCss(data.sizing.thumbs.vertical))
+                    if (data.sizing.container.scrollHeight > 0 && options.direction !== 'horizontal') {
+                        data.thumbs.vertical = $(o.div).css(o.getThumbCss(data.sizing.thumbs.vertical, data.options.zIndex))
                                     .css({ opacity: options.persistThumbs ? o.constants.thumbOpacity : 0 });
                         target.prepend(data.thumbs.vertical);
                     }
@@ -506,7 +517,7 @@
         },

         // gets the CSS object for a thumb
-        getThumbCss: function (size) {
+        getThumbCss: function (size, zIndex) {

             return {
                 position: "absolute",
@@ -517,7 +528,7 @@
                 "-moz-border-radius": size.corner + "px",
                 "-webkit-border-radius": size.corner + "px",
                 "border-radius": size.corner + "px",
-                "z-index": "999"
+                "z-index": zIndex
             };

         }

Missing event normalization in start event handler resets position on touchscreen devices to 0

Hello azoff,

you forgot to add the event normalization to the start event handler. Because of this the initial coordinates for scrolling are resetted to zero on iOS devices (testing on event.touches would probably support more touch-enabled os). Adding

o.normalizeEvent(event);

to the function resolves this problem. Though I am still missing the click event ;)

Greetings

Events are double called when overscroll is rebound

Rotator in overscroll

Can we use rotator in overscroll??

Feature request - add option: callback function

Actually I have added this functionality directly to the plugin code - but it would be much better if it would be as an input parameter.

callback function - user could define function that should trigger after the elements stop moving inside container.

This is useful when you for example need to upload something dynamically, and after each scroll occur you need to check whether you have reached the end or not yet.

Overscroll problem with Flash object

I had a problem with your script while scrolling through a gallery of images and videos some of which were Flash Video.

I wasn't able to click on the flash video as your script was sending the event.preventDefault too soon.

I changed your script on line 355:
// only start drag if the user has not explictly banned it.
if (!start.is(data.options.cancelOn)) {
event.preventDefault();

So event.preventDefault is only called if the target is not part of my "cancelOn" selector.

Cheers!

Opera browser problem - image (content) is dropped to default state

The bug is reproduced in Opera browser only.

I use 10.61 (russian version), other users says the same problem occurs on 10.70 (english version).

The error is reproduced even on your site http://www.azoffdesign.com/plugins/js/overscroll

You need to drag'n'drop the map somewhere - to the right or bottom (doesn;t matter - the main idea to move somewhere from default position).
Then put the mouse cursor out of image (container object).
At this moment the image will return (jump) to it's default position - in the top left corner, I expect that it would not change unless I move it back.

Feature request - add option: auto scroll on mouse wheel

This is not a bug, but a feature request.

I see you have added option.direction in v. 1.3.2
This is great, because I needed it (only horizontal) for my project. So finally I have reached this by using CSS and giving freedom for the element to scroll only horizontally.

So if such a parameter you have added - I think it would be great to have the following (actually this is what was asked by many people in my project and I was planning to try and implement it myself):

add parameters:
{
mousescroll: true, //by default false
mousescrollspeed: 1 //possible values e.g. 1, 2, 3, by default 1
}

so what this all about?
When you hover over the container with cursor and scroll the mouse wheel - the elements inside should move with "iphone after effect", as if you use drag'n'drop.

if direction is 'auto' or 'vertical' - then mouse wheel up and down would result in elements move up and down.
if direction is 'horizontal' - then mouse wheel down = elements inside container move to the left, and vice versa: mouse wheel up - elements to the right.

mousescrollspeed - would define the initial impulse of the event - the bigger value - the more distance after 1 mouse wheel scroll should the elements move.

anchor tag is not working on iPad

Hi,

Thanks for such a great jQuery code! :)
But there is a problem anchor tag is not working on iPad. when I click on "

Click Me!

". it dosn't open popup.

Please help me.

Thanks in advance

Scroll the entire page?

Is it possible to scroll the entire page with your plugin, sorry if this isn't the right place for this, I didn't know where else to ask it. thanks so much man.

direction paramater mislabeled in README.md

small typo in README.md

options.cursor {String: 'auto'} is listed to :

• The scroll direction of the overscrolled element,

i believe this should be listed as :
options.direction {String: 'auto'}

Use it for iOS pages-like movement

Hi, I found your plugin and is pretty amazing and easy to use but i found myself with this issue, i want to use it to replicate iOS apps pages like method.

Can you tell me which property is modified because i can't find it (i've read the whole script) so i can modify it again at the end of the movement and finalize my idea

here you can see it more explained:
http://stackoverflow.com/questions/5931599/find-modified-css-js-property

Opera problem

There is a problem with moving elements in Opera browser. I tested at latest 11.6x versions.
After releasing mouse cursor content still moves for cursor during few seconds.

scrollThumbs

Hi, first of all, thanks for this great plugin.

An option to decide only to show horizontal or vertical scrollThumbs would be nice, instead of the global showThumbs option.

Overscroll, Android and Touchevents

I am just opening this issues to talk about "Touchevents" and mobiles.
Right now overscroll is working really fine on iPad/iPhone mobiles because it uses the HTML5 css features "overflowScrolling".

Unluckily Android clients (until the latest realease) cannot use such feature and the library must use "touchevents" to handle the scrolling.

I succesfully used the touchevents to scroll.
There is still a little problem to understand a "simple click" was done; if such event occurs the event must not be stopped with preventDefault().

I still have to understand hot to fork/commit correctlu on github but I'd like to share this little solution which needs improvment.

just changed the "events" variable to add touch events:
events = {
drag: 'mousemove touchmove',
end: 'mouseup mouseleave click touchend touchcancel',
hover: 'mouseenter mouseleave',
ignored: 'select dragstart drag',
scroll: 'scroll',
start: 'mousedown touchstart',
wheel: 'mousewheel DOMMouseScroll'
},

and added a simple check in the drag function:
drag = function (event) {
//ADDED to handle Touch Events datas correctly
if(event.originalEvent.touches){
event.pageX=event.originalEvent.touches[0].pageX;
event.pageY=event.originalEvent.touches[0].pageY;
}
//End ADD
event.preventDefault();
var data = event.data,
etc... etc...

Hope this code can be of some use for other people.

Riccardo "Rial" Re

direction: 'horizontal'

Does this work? I can't seem to get it to constrain scrolling.

$('#timeline').overscroll({'direction':'horizontal'});

scroll is getting crashed

Overscroll is getting crashed when I am populating more than 1500 records in it from sqllitre DB. Also it slow down when we increase the no of records in the corresponding element.

I am using it on Android application with Phonegap.

error is like following

09-23 18:43:37.160: ERROR/Web Console(12386): TypeError: Result of expression 'event.originalEvent.changedTouches' [undefined] is not an object. at file:///android_asset/www/scripts/jquery.overscroll.js:292

When I reached to the js file at the supposed line 292 I found the line var iosEvent = event.originalEvent.changedTouches[0]; over there which is written under following code.

normalizeEvent: function(event) {
if (o.checkIosDevice()) {
var iosEvent = event.originalEvent.changedTouches[0];
event.pageX = iosEvent.pageX;
event.pageY = iosEvent.pageY;
}
},

I am not able to predict where/what is going wrong to this?
Any help would get appreciated.

Regards,
Pramod

Unable to detect drag state

Hi,

I'm trying to implement your plugin in a touch-screen interface, but I cant access to the "dragging" data. Doing elm.data("dragging") in the overscrolled jQuery element as you say in the readme notes always returns "undefined".

¿Any help?

Thank you.

Overscrolling Overscroll?

Hi,

its a bit ironic, that "The Overscroll" plug-in is called "overscroll" - but don't support the widespread "overscroll" effect :)
Or did I just miss something in the options?

Is this a feature witch is possible to implement?
I will take a look into the code as well.

But I hope someone can give me a hint, if they tried to implement this.

cancelOn - prevent dragging on child elements

Hi,

May I suggest to extend the current "cancelOn" functionality?
Currently it takes a selector and if user clicks and drags on this selector - overscroll doesn't scroll.
What I'm suggesting is to also check if a direct target of the mousedown event is also NOT inside the cancelOn selector.
(I hope this makes any sense :-)
e.g.
line 377 in the current master is:

if (!start.is(data.options.cancelOn)) {
   // do something
}

the update would be something like this:

if (start.is(data.options.cancelOn) || start.closest(data.options.cancelOn).length) return true;    // cancelOn
// do something

Thanks,
Tom

Overscroll doesn't work on Samsung Galaxy

Hi, i tried Overscroll on galaxy device and it doesn't work. Have you a solution for this problem?
Thank you for all answer and for sharing that great script

Davide

Resizable Overscroll

As I mentioned before, I'm making a timeline app that will be a feature of a larger web application. While the overscroll works great to click-and-drag through the timeline, I came across two issues that surround resizing div containing the timeline with the overscroll attached to it.

1. My web application supports multiple resolutions and allows resizing. This is where the overscroll came in. On first enter everything works great; once I resized the browser I noticed the Overscroll wasn't keeping up.
2. The timeline supports zooming, which basically allows them to go from seeing Jan-Dec months taking up the whole target div "viewport" to zooming to a quarterly level (Jan-Apr, etc) that spans the entire target div "viewport". Each month is its own div with a set width (if the divs displaying the month are too large, Overscroll allows them to pan back and forth between the timeline) and with alternating colors. When the user "zooms in", it basically just expands the width of the div for each month (as well as resizing the widgets that annotate the timeline). Again, I noticed that overscroll wouldn't keep up.

The obvious solution is to tear down the current Overscroll instance on the div and re-instantiate a new instance of Overscroll (has anyone seen any mem leaking with this?).

It would be great if Overscroll could handle the resizing on its own, and I got Overscroll to handle window (solving problem #1) resizing on its own (please let me know if this is unsafe code):

onWindowResize = function(event) {

        var data = event.data;

        // only resize and reposition thumbs if target was actually resize as a result
        if(data.thumbs.added && (data.target.height() != data.sizing.container.height || data.target.width() != data.sizing.container.width)) {

            // get new sizing
            data.sizing = getSizing(data.target.get(0));

            var css;

            // reset thumb css
            css = getThumbCss(data.sizing.thumbs.vertical, data.options);
            if(data.thumbs.vertical) {
                data.thumbs.vertical.css(css);
            }

            css = getThumbCss(data.sizing.thumbs.horizontal, data.options);
            if(data.thumbs.horizontal) {

                data.thumbs.horizontal.css(css);
            }

            // move thumbs back to their original position
            moveThumbs(data.thumbs, data.sizing, data.target.scrollLeft(), data.target.scrollTop());
        }

    },

and then simply add a window resize listener in the setup function:

$(window).resize(data, onWindowResize);

Now obviously this isn't ideal since we're listening to the entire window resize event (there is no native support to listen to div resize) and need to check if the target actually has changed.

Unfortunately, this didn't solve the resizing of content INSIDE the target since the window itself didn't resize. So this idea is currently not an end-to-end "resize" solution.

Currently I'm simply tearing down the Overscroll instance on the target div and re-deploying it when the content inside the target div changes. But it is not scrolling to the scaled scroll position. I'm sure I can work around this.

There is a plugin for jquery that will allow for binding to div resizes (http://benalman.com/projects/jquery-resize-plugin/); this could be a perfect solution to handle the resizing within Overscroll. Then the function I used above (onBrowserResize) could turn into onTargetResize which, in theory (I haven't tried this yet) would handle ANY resizing that occurs to the target, whether through browser resize or content resize.

Looking for some input/critique if anyone has any :)

Thanks!

Tim

Thanks!

Error - event.data.thumbs.vertical is undefined

I have used your plugin on my project. Works like a charm, thanks. But I'm getting one annoying error.

To reproduce you need to go to http://scrollit.ru/demo1/
I use FireFox with Firebug.

When I stand on ribbon (which is rss feed actually and could be scrolled horizontally only using mouse drag'n'drop) and move mouse wheel up or down - I get "event.data.thumbs.vertical is undefined" on row 182 in Overscroll plugin file on every scroll event.

Coiuld you help on this?

Initial scroll offset

Hello azoff,

It would be nice if there was a way to set the initial scroll offset.

I have tried to force it using scrollTop() and although the list jumps to the desired offset, it is reset to 0 as soon as the mouse cursor hovers over the list.

Best regards,

Chris

Doesn't work with Mobile Safari

Despite having touch events in the code this doesn't seem to work at all on Mobile Safari. Indeed, it even prevents scrolling the page with your finger when touching the div used. Can anyone else confirm this problem?

add cancelOn selector to disable dragging when mousedown on matched elements

Currently I'm doing something like this (it works but it certainly can be improved :-)):

I've added to options:

   cancelOn: ''

than at the beginning of "start" method:

   if ($(event.target).is(event.data.options.cancelOn)) return true;

to disable dragging all matched elements (children of the main event.data.target element)

but this didn't work.until I commented out this line:

   .bind(o.events.ignored, o.noop); // disable proprietary drag handlers

With all this it works perfectly!
But I'm sure you can do it better :-)
Thanks.

mousewheel not recognized with jquery 1.7

Hi,

with the new jquery 1.7, the mouse wheel is not transferred to a pane movement. Do you have any tips here?
Thanks in advance,
Frank

Recalculate scrollbar position if scrolled element changes dimension

If the element which has the scroll handles changes its size, the scroll bar does not adjust to this new position.
If one uses the example that comes with the tar.gz, one can try this:

$('#overscroll').width('600');

and we can see that the scrollbar stays at the same position instead of staying near the right border.
it should be a matter of recalculating the position before showing the drag element. I havent' looked deeply at the src, though.

Can I show the scroll bar(Thumbs) by default?

Hi,

Thanks for the good plugin, I am working for a new project and want to use iphone like scroller.
By default, the scroll bar will be show while "mousewheel" and hide it while "mouseleave"
Can I make it visible by default? Users may know it is scrollinng container without mousewheel action.

It would be great if you can solve my concern, I thanks for your time.

Thanks
Stanley

scroll issue

Spotted a bug which occurs when leaving the scroll layer rapidly before a fade has completed: line 413 (data.start is not a function) - simple typeof fix for data.start.is !== 'undefined' seems to work

Handle scroll event to position thumbs

When using the scrollIntoView() method to position scrolled content, the thumbs are not repositioned accordingly. This can be achieved by handling the element's scroll event.

Unified diff of required changes:

@@ -51,8 +51,9 @@
         events: {
             wheel: "mousewheel DOMMouseScroll",
             start: "mousedown",
             drag: "mousemove",
             end: "mouseup mouseleave click",
+            scroll: "scroll",
             ignored: "select dragstart drag"
         },

@@ -123,8 +125,9 @@
                     overflow: 'hidden',
                     cursor: data.cursors.grab
                 }).on(o.events.wheel, data, o.wheel)
                   .on(o.events.start, data, o.start)
                   .on(o.events.end, data, o.stop)
+                  .on(o.events.scroll, data, o.scroll)
                   .on(o.events.ignored, false);

                 if (options.showThumbs) {
@@ -399,9 +402,17 @@

             }

            data.target.css('cursor', data.cursors.grab);

         },
+        
+        scroll: function (event) {
+            var data = event.data, flags = data.flags;
+            
+            if (!flags.dragging) {
+                o.moveThumbs(data, this.scrollLeft, this.scrollTop);
+            }
+        },

         clearInterval: function (target) {
             target = $(target);

Make the plugin Common JS and Require JS Compatible (AMD)

For some boiler plate to add support for AMD, see https://github.com/umdjs/umd.

Feature request: Threshold for scrolling

Hi Azoff,

a nice additional feature would be a threshold up until which to consider drag events as clicks. I.e. a user must move the mouse at least 5 pixels to initiate scrolling. If the user does not scroll that far, the click deferral should not be activated.

Background: I have an app running on a touch screen that is very sensitive. There is a scrollable list of items, that can also be clicked. It is, however, quite difficult to actually click an item, since most of the time there is a slight movement by the finger that results in scrolling.

If you have the time, it would be really nice of you to implement this. Otherwise, I'll get cracking on it myself some time in the next few days.

Thanks,
Christoph

Don't show scroll bar when not needed (w/ solution)

Great plugin for what I need (dynamic timeline with scrolling). Thank you much for creating this solution!

I noticed though that when the timeline height is the same as the viewport height (meaning we don't need a horizontal scroll bar to show), it would still show.

So I peaked in the code and added the following conditional (see comments "NEW CONDITIONAL") to the if statement for the createThumbs function:

createThumbs = function(target, sizing, options) {

        var div = '<div/>',
        thumbs  = {}, 
        css     = false;

        if (sizing.container.scrollWidth > 0 
            //NEW CONDITIONAL
            && sizing.container.scrollWidth > sizing.container.width
            //
            && options.direction !== 'vertical') {
            css = getThumbCss(sizing.thumbs.horizontal, options);
            thumbs.horizontal = $(div).css(css).prependTo(target);
        }

        if (sizing.container.scrollHeight > 0 
            //NEW CONDITIONAL
            && sizing.container.scrollHeight > sizing.container.height 
            //
            && options.direction !== 'horizontal') {
            css = getThumbCss(sizing.thumbs.vertical, options);
            thumbs.vertical = $(div).css(css).prependTo(target);
        }

        thumbs.added = !!css;

        return thumbs;

    }

So far this solution is working great on my end, please let me know if anyone sees an issue with this, maybe it could get included on the next release for others to use :)

Thanks again for the great plugin.

-Tim

mousedown doesn't function correctly if used on live event

this correctly fires on alert:
$(".open_check").mousedown(function(){
alert("test");
};

but this does not:
$(".open_check").live("mousedown",function(){
alert("test");
});

the mouseup function works fine.

Chrome 19 Breaks Overscroll

All other browsers currently work, but chrome 19 doesn't seem to be working. No errors showing the debug console unfortunately. Drag just doesn't work.

on window resize overscroll doesnt update scrolling height

removeoversroll found it

iPad ajax requested element click not working

Hi,
I got a problem on iPad with a element that I have to click on. The element is get from a ajax request inside the overscoll div. The error doesn't apply on Win/Os..only on iPad as far as i tested.

Anyways, here's how the image html code looks.

<-div style="float:right; height:15px;">
<-div style="width:25px; height:25px; top:25px;">
<-img style="position:fixed;" src="img/close.png" id="xclose" />
<-/div>
<-/div>

here's my overscroll function:

$(document).ready(function() {
$("section#sectiune_afisare").overscroll({
cancelOn: '#x-close',
showThumbs: true,
direction: 'vertical'
});
});

and here's the xmlhttp request:

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("sectiune_afisare").innerHTML=xmlhttp.responseText;
$('#xclose').click(function() {
$('section#sectiune_afisare').toggle(400);
$('section#sectiune_articole').toggle(400);
$('#cautare').toggle(400);
});
return false;
}

Thanks for your time,
A Tirnovanu

Automaticaly control position of scroll

I would be great to implement method which will give an ablity to scroll to some position automaticaly.
For now I'm using jQuery.ScrollTo plugin, e.g.:

$('#holder').scrollTo( { top: '0px', left: '550px'} , 500);

rubber banding when viewing on a mobile device

When you view the interactive demo on the home page on a mobile device it is impossible to scroll to the right/bottom edge of the map as every time you re-position your finger the map snaps back to the origin.

Update CSS to use new cursors

http://www.worldtimzone.com/mozilla/testcase/css3cursors.html

Add A "destroy" method

Just a note to myself to add a mechanism to unbind and revert overscrolled elements to native auto scrolling.

Native Scrolling in iOS5

per http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5

Auto Move when no activity

Hi there, thanks for such a great jQuery code! ;)
I was wondering how could I set a timer, that would activate on no-activity, which would auto slide container?

Click on a drifting scroll does not call onDriftEnd method

When I press and scroll the div and then release the mouse button - it drifts. But if I click on it while it's drifting - it stops but does not fire onDriftEnd callback.