[scrollery] window.scrollTop does not exist #2
Comments
|
I'm not sure this one is solvable - when the page scrolls some browsers consider it The right way to do it in JavaScript is by watching both or sniffing the browser, but the best we could do is watch both. Here's how I've handled it in another plugin: var isSafari =
!!navigator.userAgent.match(/safari/i)
&& !navigator.userAgent.match(/chrome/i)
&& typeof document.body.style.webkitFilter !== "undefined"
&& !window.chrome;
var isAndroid = navigator.userAgent.match(/android/i)
var isEdge = navigator.userAgent.match(/Edge\/\d/i)
var isChrome = navigator.userAgent.match(/Chrome/i)
// Safari, Android, and Edge should watch BODY
if (isSafari || isChrome || isAndroid || isEdge) {
var scrollContainer = document.body
// Firefox should watch HTML
} else {
var scrollContainer = document.documentElement
}So applying the same idea to CSS, you'd want to watch both <!DOCTYPE html>
<html data-scrollery=html>
<body data-scrollery=body>
<style>
html, body {
background: hsl(calc(var(--html-scrollTop) + var(--body-scrollTop)),50%, 50%);
font-size: 10vw;
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<script src=http://tomhodgins.github.io/cssplus/scrollery.js></script>This should work according to the spec, and does work in Chrome and Safari, but Firefox doesn't like |
|
Thanks for the insights! Never knew about the html/body differences. I'll try some stuff and let you know what works |
|
If you are tracking |
I found a small cross-browser issue in scrollery.js. If I add
data-scrollery=bodyto the body element, the event listener is added towindow, but thewindow.scrollTopattribute does not exist. Howeverdocument.documentElement.scrollTopdoes work.Example:
Open http://csspl.us/test/scrollery.html in Firefox 54.0
The text was updated successfully, but these errors were encountered: