Question

Problem in brief

I have got a piece of working two dimensional scrolling code. Scrolling as such is working fine. Scrolling can be done in any direction (not like restricted to only horizontal or only vertical at a ti,e) but there are two problems –

• Scrolling beyond the visible area towards top and left, does not bounce back the scrollable area.
• Scrolling to right and bottom bounces back.

Problem demo – http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Note – Test in webkit browsers only (Google chrome and Safari).

Solution I am looking for

• Either, point out what is wrong in my code.
• Or share any properly implemented working demo of both ways scroll (horizontal + vertical) using the same version of iscroll, so that I can follow the same. I am using – version 3.7.1, preferable, or using iscroll version 4, fine as well.
• Or any pointers, of course, would be appreciated.

Problem Description

Please check working code here – http://jsfiddle.net/sandeepan_nits/pAhjU/6/

Note –

• Test in webkit browsers only (Google chrome and Safari).
• I have knowingly put everything inside the HTML section in the jsfiddle, because if I separate things completely, the scrolling does not work, and I am not sure where exactly it stops working. Thanks if you can point out.

Code

Here is the HTML –

<div class="header">
    <div class='left_link'></div>Demo</div>
    <div id="main_content" class="main_content">

    <b><div id=scroller1><br/> 
    <div class='center_data'>Scrollable area</div>
    <div class='center_data'>hello world!</div>
    <br/> 
    </div></b>

</div>

Note – I know there is invalid html there – <div id=scroller1> is inside <b></b> and I am not sure why if I remove the <b></b> tags, horizontal scrolling does not work anymore – check here.

Here is the js –

    var myScroll;
    var a = 0;
    function loaded() {
        //setHeight();  // Set the wrapper height. Not strictly needed, see setHeight() function below.

        // Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
        myScroll = new iScroll('scroller1', {desktopCompatibility:true});
        //myScroll2 = new iScroll('scroller2', {desktopCompatibility:true});

    }


    // Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
    // If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    // Load iScroll when DOM content is ready.
    document.addEventListener('DOMContentLoaded', loaded, false);

I guess the reason is that the scrollable div is by default rendered at the bottom-right corner of the scrollable area. But I am not sure about the proper way to configure those things – how to set where to render the scrollable div inside the scollable area. So far I did not find any working demo of both ways scrolling – horizontal + vertical scrolling.

I checked out the documentation of iscroll and many working demos, but did not find any demo where scrolling can be done both ways – horizontally as well as vertically. I checked the “Accepted options are:” section under “Syntax” section in http://cubiq.org/iscroll but none of those params seem to be what I am exactly looking for.

Other things

• Also, one more thing, I am not able to view the area covered by dom elements in chrome browser, while I inspect the given scroll demo. By viewing the area I mean moving the mouse over the dom inspector panel highlights the dom in the browser view. When does it not appear? I checked with validated HTML as in http://jsfiddle.net/sandeepan_nits/pAhjU/12/.

• Somebody please create a tag iscroll or iscroll3 so that I can retag my question.

Update
I just want to have normal two dimensional scrolling with the scroll area being properly inside the visible screen and there should be bounce back on taking outside the screen. Right now there is no bounce back (in my jsfiddle) on scrolling towards top and left, outside screen. Bounce back happens on scrolling to right and bottom. I just want the scrolling area to be well placed inside the screen. I guess bounce back will automatically get fixed then.

Answer 1

I think the last version (4.1.8) on the github repo will fix your problem 😉 I’m using it on some projects and it is now optimized for desktop browser 😉

Edit

From the documentation :

hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
vScroll, same as above for vertical scroll.

By default, when creating a new iScroll(‘idOfElement’) the scroll is vertical and horizontal. It can be disabled with these parameters. Dual Scroll is totally possible as this video shows it.

So, to force dual Scroll :

var myScroller = new iScroll('idOfElement', {vScroll:true, hScroll:true});