kirkouimet/overscroll.html

## 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>
	<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>