Menu
I'm not able to prevent the main body content from scrolling while a fixed position overlay is showing. Similar questions have been asked many times, but all of the techniques that previously worked do not seem to work on Safari in iOS 10. This seems like a recent issue.
Some notes:
html and body to overflow: hidden, however that makes the body content scroll to the top.touchmove while the overlay is showing. This worked previously, but no longer works.Here's the full HTML source:
<!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>×</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>
301
Try double tapping on either side of the screen at edges. Use a two finger press inside the window that you're trying to scroll and move them up or down simultaneously. Or pinch your thumb and forefinger together and move it up or down.
Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
Add -webkit-overflow-scrolling: touch; to the #overlay element.
Then add this JavaScript code at the end of the body tag:
(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; } }()) Combined Bohdan Didukh's approach with my previous approach to create an easy to use npm package to disable/enable body scroll.
https://github.com/willmcpo/body-scroll-lock
For more details on how the solution works, read https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
