Created
June 19, 2018 20:50
-
-
Save nolanlawson/fd1c8523f6449e0ae31153a415e713c2 to your computer and use it in GitHub Desktop.
Test scroll events
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Test scroll events</title> | |
| <style> | |
| .scrollable { | |
| height: 400px; | |
| overflow-y: scroll; | |
| border: 1px solid #999; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Test scroll events (scroll down)</h1> | |
| <pre>Received 0 scroll events</pre> | |
| <div class=scrollable></div> | |
| <script> | |
| (function () { | |
| 'use strict' | |
| var scrollable = document.querySelector('.scrollable') | |
| var pre = document.querySelector('pre') | |
| for (var i = 0; i < 1000; i++) { | |
| var div = document.createElement('div') | |
| div.innerHTML = 'scroll me' | |
| scrollable.appendChild(div) | |
| } | |
| var timeout | |
| var scrollEvents = 0 | |
| scrollable.addEventListener('scroll', () => { | |
| scrollEvents++ | |
| if (timeout) { | |
| clearTimeout(timeout) | |
| } | |
| timeout = setTimeout(() => { | |
| pre.innerHTML = `Received ${scrollEvents} scroll events` | |
| }, 200) | |
| }) | |
| })() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment