Safari iOS 10: Zapobieganie przewijaniu za ustaloną nakładką i utrzymywanie pozycji przewijania

Nie mogę zapobiec przewijaniu treści głównej podczas wyświetlania nakładki o ustalonej pozycji. Podobne pytania były zadawane wiele razy, ale wszystkie techniki, które wcześniej działały, wydają się nie działać na Safari w iOS 10. Wydaje się, że był to ostatni problem.Safari iOS 10: Zapobieganie przewijaniu za ustaloną nakładką i utrzymywanie pozycji przewijania

Kilka uwag:

mogę wyłączyć przewijanie jeśli ustawić zarówno html i body do overflow: hidden, że sprawia jednak zwój treści ciało do góry.
Jeśli zawartość nakładki jest wystarczająco długa, aby można było przewinąć, przewijanie jest poprawnie wyłączone dla zawartości strony głównej. Jeśli zawartość nakładki nie jest wystarczająco długa, aby spowodować przewijanie, możesz przewijać zawartość strony głównej.
Zawarłem funkcję javascript od http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/, która wyłącza touchmove podczas wyświetlania nakładki. To działało wcześniej, ale już nie działa.

Oto pełne źródło HTML. Możesz go przetestować pod adresem http://www.pixeldigital.com/test/ios_scroll.html.

<!doctype html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <style type="text/css"> 
     html, body { 
      width: 100%; 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     body { 
      font-family: arial; 
     } 
     #overlay { 
      display: none; 
      position: fixed; 
      z-index: 9999; 
      left: 0; 
      right: 0; 
      top: 0; 
      bottom: 0; 
      overflow: scroll; 
      color: #fff; 
      background: rgba(0, 0, 0, 0.5); 
     } 
     #overlay span { 
      position: absolute; 
      display: block; 
      right: 10px; 
      top: 10px; 
      font-weight: bold; 
      font-size: 44px; 
      cursor: pointer; 
     } 
     #overlay p { 
      display: block; 
      padding: 100px; 
      font-size: 36px; 
     } 
     #page { 
      width: 100%; 
      height: 100%; 
     } 
     a { 
      font-weight: bold; 
      color: blue; 
     } 
    </style> 
    <script> 
     $(function() { 
      $('a').click(function(e) { 
       e.preventDefault(); 
       $('body').css('overflow', 'hidden'); 
       $('#page').addClass('disable-scrolling'); // for touchmove technique below 

       $('#overlay').fadeIn(); 
      }); 
      $('#overlay span').click(function() { 
       $('body').css('overflow', 'auto'); 
       $('#page').removeClass('disable-scrolling'); // for touchmove technique below 

       $('#overlay').fadeOut(); 
      }); 
     }); 

     /* Technique from http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/ */ 
     document.ontouchmove = function (event) { 
      var isTouchMoveAllowed = true, target = event.target; 
      while (target !== null) { 
       if (target.classList && target.classList.contains('disable-scrolling')) { 
        isTouchMoveAllowed = false; 
        break; 
       } 
       target = target.parentNode; 
      } 
      if (!isTouchMoveAllowed) { 
       event.preventDefault(); 
      } 
     }; 
    </script> 
</head> 

<body> 
    <div id="overlay"> 
     <span>&times;</span> 
     <p>fixed popover</p> 
    </div> 

    <div id="page"> 
     <strong>this is the top</strong><br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     lots of scrollable content<br> 
     asdfasdf<br> 
     <br> 
     <div><a href="#">Show Popover</a></div> 
     <br> 
     <br> 

    </div> 

</body> 

</html>

Źródło

2017-01-11 Gavin

proszę dodać -webkit-overflow-scrolling: touch; do elementu #overlay.

I proszę dodać ten kod javascript na końcu znacznika body:

(function() { 
    var _overlay = document.getElementById('overlay'); 
    var _clientY = null; // remember Y position on touch start 

    _overlay.addEventListener('touchstart', function (event) { 
     if (event.targetTouches.length === 1) { 
      // detect single touch 
      _clientY = event.targetTouches[0].clientY; 
     } 
    }, false); 

    _overlay.addEventListener('touchmove', function (event) { 
     if (event.targetTouches.length === 1) { 
      // detect single touch 
      disableRubberBand(event); 
     } 
    }, false); 

    function disableRubberBand(event) { 
     var clientY = event.targetTouches[0].clientY - _clientY; 

     if (_overlay.scrollTop === 0 && clientY > 0) { 
      // element is at the top of its scroll 
      event.preventDefault(); 
     } 

     if (isOverlayTotallyScrolled() && clientY < 0) { 
      //element is at the top of its scroll 
      event.preventDefault(); 
     } 
    } 

    function isOverlayTotallyScrolled() { 
     // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions 
     return _overlay.scrollHeight - _overlay.scrollTop <= _overlay.clientHeight; 
    } 
}())

Mam nadzieję, że to pomaga.

Źródło

2017-01-11 21:47:43

który pracował! Dzięki! – Gavin

Kod powinien być lepiej zapisany w pliku zewnętrznym, aby można go było zapisać w pamięci podręcznej. – Rolf

Tysięczne dzięki tobie! – TheTrueTDF

Gdy nakładka jest otwarty, można dodać klasę jak prevent-scroll do body aby zapobiec przewijanie elementów za nakładki:

body.prevent-scroll { 
    position: fixed; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
}

https://codepen.io/claudiojs/pen/ZKeLvq

Źródło

2017-04-28 09:59:00 Claudio

+10

Nie utrzyma pozycji przewijania Obawiam się. – aventic

podejście

Połączony Bohdana Didukh jest z moim poprzednim podejściu do tworzenia łatwy w użyciu pakiet npm do wyłączania/włączania przewijania ciała.

https://github.com/willmcpo/body-scroll-lock

Aby uzyskać więcej informacji o tym, jak działa rozwiązanie, przeczytaj https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177

Źródło

2018-01-19 12:13:34

Safari iOS 10: Zapobieganie przewijaniu za ustaloną nakładką i utrzymywanie pozycji przewijania

Odpowiedz

Powiązane problemy