Next JS Event Listener Failing to Detect Scroll Events

Question

Next JS Event Listener Failing to Detect Scroll Events

Currently, I am attempting to change the state and display a shadow in the navigation bar when the user scrolls, but for some reason it is not detecting the event.
I am working with nextJS 13 and tailwind css.

const [shadow, setShadow] = useState(false);

useEffect(() => {
  const handleShadow = () => {
    if (window.scrollY >= 90) {
      setShadow(true);
    } else {
      setShadow(false);
    }
    window.addEventListener("scroll", handleShadow, true);
  };
  return window.removeEventListener("scroll", handleShadow);
}, []);

inside my HTML element

<div
  className={
    shadow
      ? "fixed left-0 top-0 w-full z-10 ease-in duration-300 bg-[#112240] shadow-xl"
      : "fixed left-0 top-0 w-full z-10 ease-in duration-300 bg-[#112240]"
  }
>
other code
</div>

javascript css next.js tailwind-css

Answer 1

Answer №1

The error in your code is caused by the event listener being initialized within the handleShadow function. By relocating it outside of the function, you can resolve this issue.

const [shadow, setShadow] = useState(false);

useEffect(() => {
  const handleShadow = () => {
    if (window.scrollY >= 90) {
      setShadow(true);
    } else {
      setShadow(false);
    }
  };
  window.addEventListener("scroll", handleShadow, true); //moved it out the function's body
  return window.removeEventListener("scroll", handleShadow);
}, []);

Answer 2

The error in your code is caused by the event listener being initialized within the handleShadow function. By relocating it outside of the function, you can resolve this issue.

const [shadow, setShadow] = useState(false);

useEffect(() => {
  const handleShadow = () => {
    if (window.scrollY >= 90) {
      setShadow(true);
    } else {
      setShadow(false);
    }
  };
  window.addEventListener("scroll", handleShadow, true); //moved it out the function's body
  return window.removeEventListener("scroll", handleShadow);
}, []);

Answer 3

Answer №2

Give this a shot

try {
  const handleScroll = () => {
    if (window.scrollY >= 90) {
      setScrollActive(true);
    } else {
      setScrollActive(false);
    }
  };
  window.addEventListener("scroll", handleScroll);
} catch(err) {
  console.error("An error occurred while handling scroll:", err);
}

Answer 4

Give this a shot

try {
  const handleScroll = () => {
    if (window.scrollY >= 90) {
      setScrollActive(true);
    } else {
      setScrollActive(false);
    }
  };
  window.addEventListener("scroll", handleScroll);
} catch(err) {
  console.error("An error occurred while handling scroll:", err);
}

Next JS Event Listener Failing to Detect Scroll Events

Answer №1

Answer №2

Similar questions

eliminating the hues beneath the lines on Morris region charts

The behavior of Date's constructor differs when applied to trimmed versus untrimmed strings

Leveraging the power of `.vue` files in modern web browsers that have native support for

What is the reason behind Ramda having multiple curry functions in its source code, much like Redux having multiple compose functions?

Combining two states in the Vuex store

Issues encountered with AngularJS directive binding inner content not functioning as expected

Is there a maximum number of window.open() calls that can be made in JavaScript?

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

What possible reasons could there be for my vue project failing to load the JavaScript file?

Form Automatically Submits Data Upon Loading of Page

What is the best way to turn my thumbnail into a clickable link while having the title positioned to the right?

the contents exceed the boundaries

Send the parameter to the compile method within the directive

Creating a design with CSS that features three main content columns of equal height, all of which are scrollable and have fluid heights, along with a sticky

Anticipated the presence of a corresponding <tr> in the <table> within the server HTML, but encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

Tips for positioning bootstrap dropdowns side by side in a row

Utilizing jQuery to invoke a function at the conclusion of another function's execution

Facing problem with implementing NgMoudleFactoryLoader for lazy loading in Angular 8

Fixing a scrolling element within a div located below the screen is my goal, ensuring it remains fixed in place as the user scrolls

Ensure your Vue components have type-checked props at compile time when using TypeScript