Detecting the current position in a scrollable DIV

Using the iScroll4 framework we have compatible scrolling divs on touch operating systems. Additionally we have arrows on either side that jump by 2开发者_开发技巧40px onClick. This is for browsers that do not support CSS3.

The problem is that then when one scrolls on a touchscreen operating system and then presses an arrow it scrolls back to where it was before they did this and then advances 240px.

The reason is because iScroll does not supply information to my global variable offset.

I would imagine the way out is to use JQuery's .Scroll() method to determine when the div has finished scrolling and then update the global variable. How to accomplish this is another story.

Here is a fiddle. Use the L & R Buttons as the arrows to left and right and for those of you with CSS3 browsers do some dragging and then see what happens when you press one of those buttons. http://jsfiddle.net/Agp74/5/

Any ideas how to sort this.

Marvellous

Some tips since I had to write something almost identical:

If you have access to when $.animate() is called you can add a function using the step property: http://api.jquery.com/animate/

The scroller I built used the left property to control where the inside div was positioned:

<div id="#outside">
    <div id="#partThatSlides">Content Content Content ...</div>
</div>

I found that I could get the current slider position by doing either of these methods:

var trueLeft = $('#partThatSlides').offset().left - $('#outside').offset().left;

or

var trueLeft = parseInt($('#partThatSlides').attr('left'));

from performance testing I found the second to be almost 20-50x faster than the first method

EDIT:

It looks like from the source of the plugin you are using you can tie into one of these events:

        onBeforeScrollStart: function (e) { e.preventDefault(); },
        onScrollStart: null,
        onBeforeScrollMove: null,
        onScrollMove: null,
        onBeforeScrollEnd: null,
        onScrollEnd: null,
        onTouchEnd: null,

I'd guess that you could perform your logic in there.

I would move the constructing of your scroller into the same closure scope as your "global" (but not really global) variable so you have something like this:

EDIT2:

Here's working code

$(document).ready(function(){
    var myScroll2,
        offset = 0;

    function scrollHandler() {
        if(this.x || this.x === 0) {
            offset = this.x
        }
    };


    myScroll2 = new iScroll('bkdates', {
        snap: 'div',
        useTransform: false,
        momentum: false,
        hScrollbar: false,
        vScrollbar: false,
        onScrollMove: scrollHandler,
        onScrollEnd: scrollHandler
    });

    $( '#bkarrowsr' ).mouseup( function() {
        offset -= (48 * 5);
            if ( offset < -(85 * 48) ) {
            offset = -(85 * 48); // don't exceed this limit
         }
         myScroll2.scrollTo(offset,0,400);   
    });
    $( '#bkarrowsl' ).mouseup( function() {
        offset += (48 * 5);
        if ( offset > 0 ) {
            offset = 0; // don't exceed this limit
            }
         myScroll2.scrollTo(offset,0,400);
     });
});