Skip to content

Instantly share code, notes, and snippets.

@kirkouimet kirkouimet/overscroll.html
Last active Feb 15, 2016

Embed
What would you like to do?
<html>
<head>
<title>Overscrolling HTML Elements in Chromium on OS X using a Trackpad</title>
<style>
html {
font-family: sans-serif;
border: 4px solid #00AAFF;
}
</style>
</head>
<body>
<h1>Overscrolling HTML Elements in Chromium on OS X using a Trackpad</h1>
<h3>I would like to enable overscrolling on all or individual HTML elements.</h3>
<p>Currently, overscrolling works at the document level. You must be on an OS X device with a trackpad. If you scroll the entire document you can see that the top of the document allows you to overscroll and then elastically bounces back into position.</p>
<h2>Here is scrollable content in a div. You can see that the div does not allow overscrolling and is rigid.</h2>
<div style="border: 4px solid #AA00FF; height: 200px; overflow-y: scroll;">
<p>Scroll in this div (border purple) and you will see it doesn't allow overscrolling.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
<p>Repeated content to go beyond height constraint of 200px to show scrollbar.</p>
</div>
<h2>Here is scrollable content in a textarea. You can see that the div does not allow overscrolling and is rigid.</h2>
<textarea style="width: 90%; height: 200px;">
Scroll in this textarea and you will see it doesn't allow overscrolling.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
Repeated content to go beyond height constraint of 200px to show scrollbar.
</textarea>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.