Last active
December 19, 2019 17:26
-
-
Save ddave592/dc9fcd35565e5aaad75173e667593d4e to your computer and use it in GitHub Desktop.
event listener that adds class to element when in view
This file contains hidden or 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
| if (window.location.href.match(/\/500k-tournament-special-test/g)) { | |
| const onLoadScrollHandler = () => { | |
| var $window = window; | |
| var $elem = document.getElementById("animation"); | |
| function isScrolledIntoView($elem, $window) { | |
| var docViewTop = document.documentElement.scrollTop; | |
| var docViewBottom = docViewTop + $window.innerHeight; | |
| var elemTop = $elem.getBoundingClientRect().top; | |
| var elemBottom = elemTop + $elem.clientHeight; | |
| return elemBottom <= docViewBottom && elemTop >= docViewTop; | |
| } | |
| let handleVisibleOnScroll = () => { | |
| if (isScrolledIntoView($elem, $window)) { | |
| $elem.classList.add("animation"); | |
| $window.removeEventListener("scroll", handleVisibleOnScroll); | |
| } else { | |
| $window.addEventListener("scroll", handleVisibleOnScroll); | |
| } | |
| }; | |
| handleVisibleOnScroll(); | |
| } | |
| // recursively check if angular has fully loaded | |
| const isFullyLoaded = () => { | |
| if (document.getElementById("animation")) { | |
| onLoadScrollHandler(); | |
| } else { | |
| setTimeout(isFullyLoaded, 500); | |
| } | |
| } | |
| isFullyLoaded(); | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Need to fix weird mobile edge case with momentum and 'scroll' event not firing as intended. Current possible solution could be setting a timeout interval specifically for mobile then kill when animation added.
reference:
https://stackoverflow.com/questions/34609018/problems-with-scroll-function-in-mobile-browsers