Skip to content

Instantly share code, notes, and snippets.

@stonehippo

stonehippo/webkit_scrolling_ltr_rtl.html

Created June 30, 2015 13:23
Show Gist options
  • Save stonehippo/fad6beb28736fe0a07c4 to your computer and use it in GitHub Desktop.
Save stonehippo/fad6beb28736fe0a07c4 to your computer and use it in GitHub Desktop.
Download ZIP
Testing WebKit native scrolling with LTR and RTL content
Raw
webkit_scrolling_ltr_rtl.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body {
font-size: 2em;
}
.container {
/*width: 50%;*/
margin: 0 0.28rem;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.custom_component {
width: 200%;
padding: 0 2rem;
}
</style>
</head>
<body>
<button>Toggle LTR/RTL</button>
<div class="container">
<div class="custom_component"
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<script type="text/javascript">
var toggle = document.querySelector('button');
var docBody = document.querySelector('body');
toggle.addEventListener("click", function() {
if (docBody.style.direction == "rtl") {
docBody.style.direction = "ltr";
} else {
docBody.style.direction = "rtl";
}
}, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment