Adjust the background hue while scrolling (scrolling feature not functioning properly)

Question

Adjust the background hue while scrolling (scrolling feature not functioning properly)

Seeking assistance with changing the background color of a component based on user scrolling behavior. I have attempted to achieve this using the following code snippet:

  const [mainColor, setMainColor] = useState('red')

  const listenScrollEvent = () => {
    window.scrollY < 10
      ? setMainColor('green')
      : setMainColor('red')
  }
  useEffect(() => {
    window.addEventListener('scroll', listenScrollEvent)
  })

  return (
        <main className={cx(classes.content, { [classes.disableScroll]: show })}
          style={{ backgroundColor: mainColor }}
        >
          {children}
        </main>

Below is the relevant CSS class for reference:

  content: {
    backgroundColor: theme.colors.gray[0],
    position: 'fixed',
    top: params.headerHeight,
    right: 0,
    left: 0,
    bottom: 0,
    overflowY: 'auto',
    [mq(theme.breakpoints.sm)]: {
      right: 0,
      left: params.sidebarCollapsedWidth
    }

I am unable to determine why window.scrollY does not seem to be functioning properly as intended. I even tried logging window.scrollY in the console but received no output. Any guidance from an expert would be greatly appreciated. Thank you.

Looking forward to your help!

javascript css reactjs typescript scroll

Answer 1

Answer №1

Upon reviewing your code, it appears that there may be a potential issue with the useEffect. However, without observing your code in action, it is challenging to pinpoint the exact problem. I quickly created a test scenario based on your example, which seems to achieve the intended functionality:

import { useState, useEffect } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';

const INITIAL_COLOR = "purple"

function App() {
  const [color, setColor] = useState(INITIAL_COLOR);

  const listenScrollEvent = () => {
    setColor(window.scrollY < 10 ? INITIAL_COLOR : "gray");
  };

  useEffect(() => {
    window.addEventListener('scroll', listenScrollEvent);
  }, []);

  return (
    <>
      <div style={{ backgroundColor: color }}>
        <a href="https://vitejs.dev" target="_blank" style={{ paddingBottom: "1000px" }}>
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
    </>
  );
}

export default App;

You can view a demonstration of the code here:

Answer 2

Upon reviewing your code, it appears that there may be a potential issue with the useEffect. However, without observing your code in action, it is challenging to pinpoint the exact problem. I quickly created a test scenario based on your example, which seems to achieve the intended functionality:

import { useState, useEffect } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';

const INITIAL_COLOR = "purple"

function App() {
  const [color, setColor] = useState(INITIAL_COLOR);

  const listenScrollEvent = () => {
    setColor(window.scrollY < 10 ? INITIAL_COLOR : "gray");
  };

  useEffect(() => {
    window.addEventListener('scroll', listenScrollEvent);
  }, []);

  return (
    <>
      <div style={{ backgroundColor: color }}>
        <a href="https://vitejs.dev" target="_blank" style={{ paddingBottom: "1000px" }}>
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
    </>
  );
}

export default App;

You can view a demonstration of the code here:

Adjust the background hue while scrolling (scrolling feature not functioning properly)

Answer №1

Similar questions

Is there a way to design OpenStreetMap similar to the aesthetic of coronavirus.app?

Dynamic image swapping using JSON key in Angular

Manage the border around the image by incorporating a timer countdown - starting from a complete circle, transitioning to a partial arc, and finally disappearing completely

Discover the best practices for implementing light secondary colors in material-ui framework

The issue arises when React child props fail to update after a change in the parent state

Get the docx file as a blob

Transforming a React Class Component into a Functional Component

Tips for evaluating style modifications on mouseover using cypress

Keeping class secrets hidden?

Overruled fashion

Responsive Design in React-restructuring the interface

Tips for defining a relative path in the base URL with AngularJS

Encountering issues with accessing a variable before its initialization in the getServerSideProps function in

How do you properly perform typechecking on a custom fetch function in ReactQuery? I'm encountering an error that states: "....is of an unknown type."

When attempting to call a function from a separate JavaScript file in Vue, the returned value is showing

Oops! An issue occurred during the `ng build` command, indicating a ReferenceError with the message "Buffer is not defined

Failure to validate two dates, even when they are both in date format within AngularJS

What is the abbreviated term for personalized elements in React Native development?

A guide on implementing radio buttons in Angular 2 and sending the selected value via a HTTP post request

What is the best way to vertically align my content in the center?