Created
July 25, 2018 07:52
-
-
Save gleenk/827306e73fb09cf05c0bd24052e34db9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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