2

I've been trying to find the answer to this question without success.

I am programming some webpages for a webview in MobileSafari. I do not have access to the Objective-C to disable the functionality that way.

I'd like to provide a smooth scrolling page experience, or a normal scrolling page experience, but not allow the user to drag past the top or bottom of the page, and subsequently cause it to show whitespace and "bounce" back.

Is there a good solution for this?

Thank you.

Casey Jensen
  • 65
  • 3
  • 11
  • Look for "rubber banding" on stack overflow, there's a couple of solutions that require you to use overflow, but that subsequently removes the ability of the user to tap the top black bar to quickly scroll to the top - depending upon what's in your web app that may be a deal-breaker. :) – euxneks May 03 '13 at 23:03

2 Answers2

3

Have a look at iScroll 4 (and the demo). It is a framework used for content scrolling in a fixed width/height area. But it should also solve your problem because you can disable the bounce effect.

How to disable the bounce effect is explained under "PASSING PARAMETERS TO THE ISCROLL". These two parameters should be interesting:

  • bounce, enable/disable bouncing outside of the boundaries. Default: true.
  • fixedScrollbar, on iOS the scrollbar shrinks when you drag over the scroller boundaries. Setting this to true prevents the scrollbar to move outside the visible area (as per Android). Default: true on Android, false on iOS.

UPDATE

I just stumbled upon Nicescroll a jQuery plugin that replaces the browser scrolling. It doesn't bounce back by default but you can turn it on or off.

Tim Bartsch
  • 918
  • 8
  • 18
  • I tried to use iScroll, however, when attempting to do so, it would immediately return the user to the top of the page, and I was unable to troubleshoot it further. – Casey Jensen May 06 '13 at 15:58
  • If you are able to provide some code or an example. We could try to help you =) – Tim Bartsch May 07 '13 at 12:59
  • Sure. I've seen some others report similar behavior. You can download the sample here. https://www.box.com/s/7avnhhieyr73lxcc9grs In AppView.js is where you'll find contentWrapper and contentScroller. Trying to scroll on the page on the iPad, it just pulls back to the top of the page. – Casey Jensen May 07 '13 at 18:23
  • By the way, thank you so much for taking the time to read and respond, Tim. – Casey Jensen May 07 '13 at 19:26
0

It seems that scroller scripts like:

don't work with every DOM structure. Or at least not with the more complex ones. I am not sure why but I could not apply them to your code or some other random webpages.

But I created a little javascript helper that disables the bounce effect and emulates the scroll animation.

noBounce.js

Here you can find an example.

It is really easy to import because it has no dependencies. Just add to your HTML:

<script src="js/noBounce.js" type="text/javascript"></script>

And run somewhere in your javascript:

noBounce.init({preventDefault: false, animate: true});

You need to set preventDefault: false. Otherwise your buttons would not work anymore.

Tim Bartsch
  • 918
  • 8
  • 18
  • I was already using this for my non-scrolling pages. :-) However, it doesn't quite take care of the problem on scrolling pages. Maybe it's just not doable. – Casey Jensen May 10 '13 at 17:14
  • 1
    You use `document.addEventListener('touchmove', function(e){ e.preventDefault(); }, false);` to disable the browser touch scrolling to get rid of the bounce effect. But then you can't scroll anymore. What noBounce.js does is emulating the touch scrolling but whithout the bounce effect. So you have a normal scrolling behavior without the bounce effect. – Tim Bartsch May 14 '13 at 13:54
  • looks like there is a better answer, that works (at least for me) http://stackoverflow.com/questions/7798201/document-ontouchmove-and-scrolling-on-ios-5 – Ben Jul 27 '13 at 14:58