The listener function is not registered in the functional components

venkata srikanth — Wed, 13 Jul 2022 07:08:54 +0000

react

Using Functional Component, I am trying to find the scroll position of an element, but the listener function isn't registering as scrolling occurs. Can anyone explain why this is happening.

Here is the code for reference

export default function App() {
  const [scrollPosition, setScrollPOsition] = useState(0);
  const innerRef = useRef<HTMLParagraphElement>(null);

  const handleScroll = () => {
    console.log("handle scroll");
    // setScrollPOsition((scrollPosition) => scrollPosition + 1);
  };

  useEffect(() => {
    if (innerRef.current) {
      innerRef.current.addEventListener("scroll", handleScroll);
      return () => innerRef.current?.addEventListener("scroll", handleScroll);
    }
  }, []);

  return (
    <div className="App">
      <span className={"scrollValue"}>
        scroll position of first header: {scrollPosition}
      </span>
      <h1 ref={innerRef}>Find My position on window</h1>
      <h2>Heading Element</h2>
      ...
      ...
      <h2>Heading Element</h2>
    </div>
  );
}

Here is the code sandbox link

Why css `-webkit-mask-box-image` is not applying after adding overflow:hidden to its parent?

venkata srikanth — Tue, 21 Dec 2021 06:08:34 +0000

I am trying to achieve linear blur on a card as shown in the following

linear-blur is applied with the following CSS properties

.app-container {
  position: relative;
  background: url("https://res.cloudinary.com/dmwrugc6z/image/upload/v1639725427/wallhaven-lq1ezq_blo0mr.jpg");
  background-size: cover;
  border-radius: 24px;
  margin: auto;
  width: 328px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.blur-background {
  height: 144px;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(20px);
  -webkit-mask-box-image: linear-gradient(to top, black, black, transparent);
}

After adding overflow:hidden; -webkit-mask-box-image property is not applying, any reason for this weird behaviour?

.app-container {
  position: relative;
  background: url("https://res.cloudinary.com/dmwrugc6z/image/upload/v1639725427/wallhaven-lq1ezq_blo0mr.jpg");
  background-size: cover;
  border-radius: 24px;
  margin: auto;
  width: 328px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow:hidden;
}

.blur-background {
  height: 144px;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(20px);
  -webkit-mask-box-image: linear-gradient(to top, black, black, transparent);
}

The blur is not masking as shown in the below

you can find the source code here: https://codesandbox.io/s/linear-blur-issue-vdjw7?file=/src/styles.css

DEV Community: venkata srikanth

The listener function is not registered in the functional components

react

Why css `-webkit-mask-box-image` is not applying after adding overflow:hidden to its parent?