Mobile Safari: Disable scrolling pages “out of screen”

前端未结

关注

 2  1859

执念已碎 2021-02-11 05:55

I want to block scrolling page \"out of the iPhone screen\" (when gray Safari\'s background behind the page border is visible). To do this, I\'m cancelling touchmove event:

2条回答

忘掉有多难 (楼主)

2021-02-11 06:49
Unfortunately I haven't had the time to check out to above yet but was working on an identical problem and found that the nesting of elements in the DOM and which relation you apply it to affects the handler a lot (guess the above solves that, too - 'var target = e.currentTarget').

I used a slightly different approach (I'd love feedback on) by basically using a class "locked" that I assign to every element which (including all its children) i don't want the site to scroll when someone touchmoves on it.

E.g. in HTML:
```
...
...
```
Then I have an event-listener running on that class (excuse my lazy jquery-selector):
```
$('.ubq_locked').on('touchmove', function(e) {
  e.preventDefault();
});
```
This works pretty well for me on iOs and Android and at least gives me the control to not attach the listener to an element which I know causes problems. You do need to watch your z-index values by the way.

Plus I only attach the listener if it is a touch-device, e.g. like this:
```
function has_touch() {
  var isTouchPad = (/hp-tablet/gi).test(navigator.appVersion);
  return 'ontouchstart' in window && !isTouchPad;
}
```
This way non-touch devices will not be affected.

If you don't want to spam your HTML you could of course just write the selectors into an array and run through those ontouchmove, but I would expect that to be more costly in terms of performance (my knowledge there is limited though). Hope this can help.

0 讨论(0)

查看其它2个回答