Skip to content

Instantly share code, notes, and snippets.

@gleenk
Created July 25, 2018 07:52
Show Gist options
  • Save gleenk/827306e73fb09cf05c0bd24052e34db9 to your computer and use it in GitHub Desktop.
Save gleenk/827306e73fb09cf05c0bd24052e34db9 to your computer and use it in GitHub Desktop.
please, add -webkit-overflow-scrolling: touch; to the #overlay element.
And add please 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;
}
}())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment