Arrows are displayed if partially hidden

[alekseykurylev]

Arrows are displayed if the component is partially hidden when scrolling the page. How can this be fixed?

Arrows.mov

[asmyshlyaev177]

Hi, can do something like this:

const LeftArrow = React.memo(() => {
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const isFirstItemVisible = visibility.useIsVisible('first', true);
  const someVisible = !!visibility.items.getVisible().length;

  const [disabled, setDisabled] = React.useState(isFirstItemVisible);
  React.useEffect(() => {
    if (someVisible) {
      setDisabled(isFirstItemVisible);
    }
  }, [someVisible, isFirstItemVisible]);

  return (
    <Arrow disabled={disabled} onClick={visibility.scrollPrev} className="left">
      Left
    </Arrow>
  );
});

const RightArrow = React.memo(() => {
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const isLastItemVisible = visibility.useIsVisible('last', false);
  const someVisible = !!visibility.items.getVisible().length;
  const [disabled, setDisabled] = React.useState(isLastItemVisible);
  React.useEffect(() => {
    if (someVisible) {
      setDisabled(isLastItemVisible);
    }
  }, [someVisible, isLastItemVisible]);

  return (
    <Arrow
      disabled={disabled}
      onClick={visibility.scrollNext}
      className="right"
    >
      Right
    </Arrow>
  );
});

[asmyshlyaev177]

Added example of better way to implement it - https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/?path=/story/examples-simple--simple
Look up for 'NOTE:' comment.