iOS 10 Safari: Ngăn di chuyển phía sau lớp phủ cố định và duy trì vị trí cuộn

Tôi không thể ngăn nội dung chính cuộn khỏi khi lớp phủ vị trí cố định hiển thị. Các câu hỏi tương tự đã được hỏi nhiều lần, nhưng tất cả các kỹ thuật mà trước đây đã làm việc dường như không hoạt động trên Safari trong iOS 10. Điều này có vẻ như là một vấn đề gần đây.iOS 10 Safari: Ngăn di chuyển phía sau lớp phủ cố định và duy trì vị trí cuộn

Một số lưu ý:

tôi có thể vô hiệu hóa di chuyển nếu tôi đặt cả html và body-overflow: hidden, tuy nhiên đó làm cho cuộn nội dung cơ thể phía trên.
Nếu nội dung trong lớp phủ đủ dài để nội dung có thể được cuộn, cuộn sẽ bị vô hiệu hóa chính xác cho nội dung trang chính. Nếu nội dung trong lớp phủ không đủ dài để gây cuộn, bạn có thể cuộn nội dung trang chính.
Tôi đã bao gồm chức năng javascript từ http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/ vô hiệu hóa touchmove trong khi lớp phủ đang hiển thị. Điều này làm việc trước đây, nhưng không còn hoạt động.

Đây là nguồn HTML đầy đủ. Bạn có thể kiểm tra nó tại 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>

Nguồn

2017-01-11 Gavin

xin vui lòng, thêm -webkit-overflow-scrolling: touch; tới phần tử #overlay.

Và thêm xin mã javascript này ở phần cuối của thẻ nội dung:

(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; 
    } 
}())

Tôi hy vọng nó sẽ giúp bạn.

Nguồn

2017-01-11 21:47:43

Đó làm việc! Cảm ơn! – Gavin

Mã sẽ tốt hơn được lưu trong một tệp bên ngoài để mã có thể được lưu vào bộ nhớ cache. – Rolf

Một nghìn cảm ơn bạn! – TheTrueTDF

Khi lớp phủ của bạn được mở ra, bạn có thể thêm một lớp học như prevent-scroll để body để ngăn chặn di chuyển của các yếu tố đằng sau lớp phủ của bạn:

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

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

Nguồn

2017-04-28 09:59:00 Claudio

+10

Sẽ không duy trì vị trí cuộn tôi sợ. – aventic

cách tiếp cận

Combined Bohdan Didukh với cách tiếp cận trước đây của tôi để tạo ra một gói npm dễ sử dụng để vô hiệu/bật cuộn cơ thể.

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

Để biết thêm chi tiết về cách làm việc của dung dịch, đọc https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177

Nguồn

2018-01-19 12:13:34

iOS 10 Safari: Ngăn di chuyển phía sau lớp phủ cố định và duy trì vị trí cuộn

Trả lời

Các vấn đề liên quan