Skip to content

Instantly share code, notes, and snippets.

@kirkouimet

kirkouimet/overscroll.html

Last active February 15, 2016 19:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kirkouimet/711181ffa427abf3f5fa to your computer and use it in GitHub Desktop.
Save kirkouimet/711181ffa427abf3f5fa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
overscroll.html
<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