I'm trying to log something to the console when the user scrolls using _hyperscript, but it doesn't seem to be working, although other eventlisteners like 'click', and 'touchstart' are working.
This is the way I'm doing it:
<body _="on scroll alert('something')"> // content // </body>
I've searched everywhere even the docs says, The event-name can be a symbol, a dot-separated symbol or a string that names the event. The most obvious events of interest are are standard HTML DOM events such as click, focus/blur, change, etc, so 'scroll' should be supported since it is among the standard HTML DOM events.
Why is it not working?
This is not hyperscript issue. If you try to do the same thing with vanilla js, you'll get same results.
When attaching scroll event to a body element, you need to define specific styling for :root
to make it work:
<style type="text/css">
:root {
overflow: hidden;
}
body {
overflow-y: scroll;
max-height: 100vh;
}
</style>
You don't have to do this, if you're handling scroll inside of the body:
<div
_="on scroll log 'foo'"
id="scroll-box"
style="overflow: scroll; height: 100px; width: 100px; float: left;">
<p style="height: 200px; width: 200px;">Scroll me!</p>
</div>