skip to Main Content

I’m trying to show scrollbar only occurs when I scroll through the area with react.
I using debounce and useState.

The problem :
When I scroll down to the end, the scroll event repeats indefinitely.
If don’t scroll down to the bottom, it looks work.

If do not change the isScroll state in the handScrollEnd function, scroll infinite repetition does not occur.
It seems to be related to the react state, but I don’t know how to solve it.

Here is my code.

 const _ = require('lodash');
 const [isScroll, setIsScroll] = useState(false);

  const handleScroll = (e: any) => {
    console.log('Scroll Start');
    setIsScroll(true);
    handleScrollEnd();
  };

  const handleScrollEnd = useMemo(
    () =>
      _.debounce(() => {
        console.log('Scroll End');
        setIsScroll(false);
      }, 1000),
    [],
  );

  return (
    <div
      css={css`
        border: 1px solid;
        width: 500px;
        height: 200px;
        overflow: auto;
        display: flex;
        ${!isScroll && '::-webkit-scrollbar { display: none; }'}
      `}
      onScroll={handleScroll}
    >
      <div>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
        of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
        a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the
        word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from
        sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
        popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
        amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since
        the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de
        Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,
        accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular
        belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
        literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
        at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words...
      </div>
      <div
        css={css`
          width: 20px;
          flex-shrink: 0;
          flex-grow: 0;
        `}
      ></div>
    </div>

Thanks.

2

Answers


  1. If you want to do something on the scroll event of that div, I would probably go for a regular JavaScript event listener. Use useEffect to attach and clean up the listener and handle the event like you would in vanilla JS.

    Here is a minimal example showing the approach above: example

    Login or Signup to reply.
  2. Assuming the scrollbar width is 10px, just add a padding-right: 10px; on your main container when the scrollbar is hidden.

    More details :

    When the scrollbar is hidder, the available width of the container increases by the width of the scrollbar, causing the content’s height to adjust to this new width. This adjustment triggers the scroll event, revealing the scrollbar and reducing the container’s width, creating a continuous cycle.

    The added padding will compensate for the width of the hidden scrollbar.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search