3

I want to do two things:

  1. Disable Elastic Scrolling of document
  2. Enable scrolling of div.master

I know you can disable the elastic scrolling using the following:

document.addEventListener('touchmove',function(e) { e.preventDefault() },false);

However this disables all scrolling, not just the elastic scrolling. I thought maybe that you could just enable scrolling again for just the div.master but I'm not sure how you would do that.

I want just this section to scroll

skaffman
  • 398,947
  • 96
  • 818
  • 769
James Kyle
  • 4,138
  • 4
  • 28
  • 41
  • To my knowledge, there are no built-in solutions. You will need to create your own algorithm or download a pre-made one. Or are you already using a library? – Jeffrey Sweeney Feb 08 '12 at 01:36

3 Answers3

1

Disable your page’s default scrolling with:

document.body.ontouchmove = function(e) { e.preventDefault(); }; 

or

document.body.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);

and enable scrolling with some CSS:

.scrolling {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
}

To completely remove elastic scrolling you’ll have to wrap the scrolling div inside another scrolling div like that:

<div class="scrolling">
  <div class="scrolling">
    // Your content goes here
  </div>
</div>
Max Hoffmann
  • 2,957
  • 1
  • 17
  • 13
0

As far as I know you will have to completely block the default page scroll on IOS using preventDefault() and then mimic the behavior without the bounce. As mentioned above, iscroll does this, but it's a bit bloat and cumbersome when you compare it to other libraries such as Zynga Scroller

You could have more fun trying to build your own as well:

http://www.html5rocks.com/en/mobile/optimization-and-performance/

backdesk
  • 1,781
  • 3
  • 22
  • 42
0

Well, I have absolutely no idea, but iScroll does it. For a better version of iScroll, use iScroll 4.

Oh yeah, and after checking out AnonyMouse, I advise do not use position: fixed;, because only iOS 5 supports it.