发表新帖
发表新帖

Prevent swiping between web pages in iPad Safari

后端 未结
关注
6 1057
执念已碎
执念已碎 2020-12-30 04:30

Swiping from the left and right edges of my iPad\'s Safari browser, moves between the currently open web pages. Is there any way to prevent it?

I have tried to add <

相关标签:
6条回答
  • 挽巷
    2020-12-30 04:58

    In iOS 13.4+ you can now preventDefault on "touchstart"

    Let's say we have a <div class="block-swipe-nav"> on the page that spans the entire width of the viewport and we want to prevent swipe navigation on that element.

    const element = document.querySelector('.block-swipe-nav');

element.addEventListener('touchstart', (e) => {

    // is not near edge of view, exit
    if (e.pageX > 10 && e.pageX < window.innerWidth - 10) return;

    // prevent swipe to navigate gesture
    e.preventDefault();
});

    I've written a short article on blocking swipe with some additional information.

    0 讨论(0)
  • 逝去的感伤
    2020-12-30 05:04

    You can't, it's been a problem since the early days of iOS. They repeatedly drag their feet on powerful web app features, such as service workers and webgl.

    The best you can do is what you should do for every browser, make the best experience you can using feature detection for every browser. Long gone are the days of making all sites look the same on every browser.

    Use a sandwich if needed, allow side swipes on browsers that support it. There is no shame in disabling a small feature on a few browsers for the benefit of the rest of your users.

    0 讨论(0)
  • 遥遥无期
    2020-12-30 05:11

    Navigation on swipe gestures are possible if there is a navigation history. Swipe left is the "go back to the previous page in my navigation history".

    So, if your app does not need a navigation history, which may be totally valid for a single screen game for example, then you can prevent the swipe issue by removing the navigation history.

    For example, I have a single page application that uses only in-memory history, I don't synchronize with the browser (history / URL). So, the "swipes" have nowhere to go to and "fix" this problem.

    That said, this is a work-around with its limitations that may not be good enough for your situation. (URL sharing is a basic thing in Internet)

    It seems browsers vendors mission is to make web developers's life miserable with silly things like that.

    0 讨论(0)
  • 轻奢々
    2020-12-30 05:12

    Try this in the <body> tag:

    onload='ontouchmove()="return(function(event) { event.preventDefault(); event.stopPropagation(); return(false); } );"'

    I imagine there might be some side effects by not letting IOS know about moving but for SPW they're probably slight.

    0 讨论(0)
  • 感动是毒
    2020-12-30 05:17

    There appears to be no way to disable this functionality, so as a workround I've found that a deadzone of 24px on either side of the page seems to be enough to stop unintentional navigation.

    Here is my CSS:

    body {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 24px;
  right: 24px;
  background-color: #ccc;
}

    Making the body position: fixed also stops Safari doing the annoying overscroll/bounce effect.

    0 讨论(0)
  • 渐次进展
    2020-12-30 05:18

    Apple provided these guidelines after iOS9.

    The guide lets you disable

    1. Scrolling 

      function touchMove(event) {
  // Prevent scrolling on this element
  event.preventDefault();
  ...
}

    2. Pinch and Zoom

      function gestureChange(event) {
  // Disable browser zoom
  event.preventDefault();
  ...
}

    You can identify a swipe gesture as follows:

    1. Begin gesture if you receive a touchstart event containing one target touch.
    2. Abort gesture if, at any time, you receive an event with >1 touches.
    3. Continue gesture if you receive a touchmove event mostly in the x-direction.
    4. Abort gesture if you receive a touchmove event mostly the y-direction.
    5. End gesture if you receive a touchend event.

    The full guide is poster here.

    Let me know if you need more help.

    Nitin, Defuzed

    0 讨论(0)
 看不清?
提交回复
热议问题