<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