How to detect scroll event when scrolling on a position fixed element

Question

My project is built on nuxt.js with vue composition api

So, my scroll event is not firing because my container has overflow:hidden. Is there any way that I can have the scroll event fire up even when overflow is hidden?

HTML

<template>
  <div id="test">
    <full-page ref="fullpage" :options="options" id="fullpage">
      <div class="title">Title</div>
      <div class="details">Details</div>
      <form>
        <input type="text" placeholder="Name" name="your-name"/>
      </form>
    </full-page>
  </div>
</template>

JS

function handleScroll(e: any) {
  console.log('scrolled')
}
onMounted(() => {
  const t = = document.getElementById('test')
  t!.addEventListener('scroll', handleScroll)
}

The objective is to have the form to only show up with some animation whenever I scroll in this #test div, while having the rest of the elements fixed. But for now I'm outputting a console log just to check if it works.

What is your HTML and CSS code? Very hard to understand what you're trying to achieve without that or an example snippet that replicates it — Cato
– Cato, Commented Jun 22, 2022 at 6:29
Whats your CSS? Is this component part of a larger view (part of a page with other elements) or is it 'full screen'? — Cato
– Cato, Commented Jun 22, 2022 at 6:54
It is full screen, I am using fullpage.js for it. Imagine there is only one section in this demo alvarotrigo.com/fullPage/#page1 . So scrolling will not have any effect. — HNG
– HNG, Commented Jun 22, 2022 at 7:02

Cato · Accepted Answer · 2022-06-22 07:59:39Z

2

This is somewhat complicated to achieve as you request, by using the overflow: hidden the scroll ability is lost and thus not possible as-is.

To capture the scroll event on an overflow hidden element, you'll have to re-create the scroll event yourself by adding an event listener to the wheel (mouse) instead. Note that browser support may be inconsistent. Also note that this won't account for up/down keyboard key scrolling, or touchmove scrolling (which you would need to add a listener to as well).

For just the basic mousewheel event, you can use:

t!.addEventListener('wheel', handleScroll);

This should work, make sure to check for browser support and accessibility. And to add the listener to the touchmove event and up/down keys if needed. You can review the arrow keys codes and proper event listener here: https://www.geeksforgeeks.org/javascript-detecting-the-pressed-arrow-key/

answered Jun 22, 2022 at 7:59

Cato

5194 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HNG Over a year ago

great answer. But can we specify the wheel direction and touchmove direction?

Cato Over a year ago

This is somewhat unreliable in some cases but you can get the direction with the event.deltaY (inside your callback function... e.deltaY). You can read more here: developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event As for the touchmove event, it's properties include the X and Y coordinates of the touch point's position relative to the viewport, page, and screen. Which you could then use to determine the direction of the user's swipe. You can read more here: developer.mozilla.org/en-US/docs/Web/API/Touch_events/…

Collectives™ on Stack Overflow

How to detect scroll event when scrolling on a position fixed element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related