Skip to content

Instantly share code, notes, and snippets.

@pguerrant
Created Apr 12, 2016
Embed
What would you like to do?
iOS/Safari bug - when using -webkit-overflow-scrolling:touch, visual scroll position is reset on the non-scrolling axis when user begins scrolling
<!DOCTYPE html>
<html>
<head>
<style>
#container {
background: yellowgreen;
height: 400px;
width: 400px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
#content {
background: green;
height: 200px;
width: 200px;
margin: 350px;
}
</style>
</head>
<body>
<!-- Attempt to scroll this element, the vertical scroll position immediately jumps to 0 -->
<div id="container">
<div id="content"></div>
</div>
<script>
(function() {
var container = document.getElementById('container');
container.scrollTop = 150;
container.scrollLeft = 150;
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment