CODEWITHSUNDEEP
javascriptjquerycssiscroll4
Dave Rottino
Dave Rottino

Reputation: 1047

iScroll ipad issues

Using iScroll (http://cubiq.org/iscroll-4) on this website (http://www.bigideaadv.com/adaptive/people.php).

I have it installed but it is not functioning correctly. JS code below:

    <script type="text/javascript">     
    var myScroll;
    function loaded() {
        myScroll = new iScroll('ipad_container');
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

Collapsed HTML structure:

    <div id="ipad_container">
            <div id="scroller">
            </div>
    </div>
    <div id="bio_section">
    </div>
    <div id="nav_section_people">
    </div>

CSS is too big to post here.

When I try and scroll, it snaps back to the top position. Anyone have any thoughts?

Upvotes: 1

Views: 2390

Answers (2)

Tim
Tim

Reputation: 911

I had the exact thing happen to me. I added the parameter 'snap:true' and it fixed the problem.

So, your line:

myScroll = new iScroll('ipad_container');

would become:

myScroll = new iScroll('ipad_container', {snap:true});

Hope that helps.

Upvotes: 0

Charlie G
Charlie G

Reputation: 824

Have you looked at the documentation?

ONLOAD Sometimes the DOMContentLoaded is a bit hasty and get fired when the contents are not ready. If you slip into some weird behaviors (eg: rubber band effect), try the following:

<script type="application/javascript" src="iscroll.js"></script>
 <script type="text/javascript"> 
  var myScroll; 
  function loaded() {
    setTimeout(function () {        
    myScroll = new iScroll('wrapper');  
   },
 100); } 
 window.addEventListener('load', loaded, false); </script>

In this case iScroll is started only 100ms after the page is completely loaded (graphics included). This is probably the safest way to call the iScroll.

source: cubiq

Upvotes: 1

Related Questions