Search code examples
hyperscript

scroll eventlistener in _hyperscript


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?


Solution

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