All geek questions in one place

Prevent horizontal scrolling in iOS WebApp

I used to run into similar problems and could never figure out workarounds, so I decided to use plugins like iScroll. This is such a simple task that I refuse to include a plugin in it - I want to prevent horizontal scrolling in iOS. This includes the rubber band effect for any content that may be on the page, but it is not visible.

From what I understand, I need to disconnect the rubber tape first, and then apply the touch scroll to the container element (which I gave “touch”). Not sure if this is the right approach?

$(document).bind('touchmove', function(e) { if (!e.target == '#touch') { e.preventDefault(); } });

Style for #touch

 -webkit-overflow-scrolling: touch; overflow: hidden; height: 100%; @media only screen and (max-width: 768px) { width: 768px; }

This does not interfere with the horizontal width of 728 pixels, however, the user can still scroll and see hidden content. Ideas?

+4
source share
4 answers

Well, this metadata is useful as such:

 <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />

They prevent this error in Safari, which occurs when the user rotates the screen. However, the most appropriate way to accomplish the desired functionality is:

  • Use the parent div with overflow hidden and make sure that the height of this div is limited according to the view space and the child div with overflow: auto or css 3 overflow-y: scroll. So basically, if the size of the content inside the child div is larger than the default size of the child, you can scroll it vertically / horizontally. Since the parent overflow: hidden, the content outside the child will not be displayed, so you get the right scroll effect. ** Also, if you use overflow: hidden and prevent by default for all touchEvents, there will be no scrolling or strange browser behavior **

  • Using JavaScript, make sure that every element in the DOM scales to fit the viewport, so avoid using static sizes for as many elements as possible.

  • Bind touchStart, touchMove, and touchEnd. Safari does not always fire the touchEnd event if the touchMove event is not listening. Even if it's just a placeholder, put it there to avoid inconsistent behavior in Safari.

  • Horizontal sliding is possible in two ways: load new content into the same div after you find the direction of the slide or fill this child div with all the elements, and it's nice for you to go and actually change the fields / position of the child inside it parent to "scroll". Animation can be used for slicker interface.

  • Tie touch event listeners. I don’t know which library or event management system you are using, but it doesn’t matter. Just call the appropriate function for the corresponding task.

  • Get the direction of the slides (left / right):
 var slideBeginX; function touchStart(event){event.preventDefault();//always prevent default Safari actions slideBeginX = event.targetTouches[0].pageX; }; function touchMove(event) { event.preventDefault(); // whatever you want to add here }; function touchEnd(event) { event.preventDefault(); var slideEndX = event.changedTouches[0].pageX; // Now add a minimum slide distance so that the links on the page are still clickable if (Math.abs(slideEndX - slideBeginX) > 200) { if (slideEndX - slideBeginX > 0) { // It means the user has scrolled from left to right } else { // It means the user has scrolled from right to left. }; }; };
+11
source

This work for me on Android, iPhone and iPad.

 <!doctype html> <html> <head> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" /> <title>Main</title> </head> <body> ... </body> </html>
+2
source

The following link may be useful to you, here the vertical is turned off and turned on horizontally, you just need to adjust the code a little for your purpose.

jquery-tools-touch-horizontal-only-disable-vertical-touch

If you don't care about vertical gliding, you can also try the following code:

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

Hope this helps.

+2
source

If you do not use meta, you will always get the effect of a rubber band.

 <meta name="viewport" content="width=device-width" />

Even if the page exactly matches the user, it will still be able to stretch the page wider than it should be able to go, you should use the presentation port to prevent this, there is no other way ...

0
source

Source: https://habr.com/ru/post/1439680/

More articles:


All Articles