Material-UI：滚动到元素时触发转换

Question

我为我的网站使用了带有 Material-UI 的 react，我想添加一些过渡。到目前为止，我已经使用了一个按钮来显示一个组件，但是我希望它在我滚动到该组件时出现，然后是转换触发器。我正在使用 Material-UI 中的 <Grow/> 组件，你能帮我解决这个问题吗？

Answer 1

您可以在容器元素中监听scroll 事件并检测其中的元素是否在视口中，如下所示：

function Scroller({ className, children, trackIds, onScrollToElement }) {
  return (
    <div
      className={className}
      onScroll={(e) => {
        for (let i = 0; i <= trackIds.length - 1; i++) {
          const id = trackIds[i];
          const trackedEl = document.getElementById(id);
          const scrollerEl = e.currentTarget;

          if (
            scrollerEl.scrollTop >
            trackedEl.offsetTop + trackedEl.offsetHeight - scrollerEl.offsetHeight
          ) {
            onScrollToElement(trackedEl);
          }
        }
      }}
    >
      {children}
    </div>
  );
}

说明

• scrollerEl 是可滚动的容器元素。确保将此元素的overflow CSS 属性设置为auto，以便在空间不足时显示滚动条。
• trackedEl 是可滚动容器内要跟踪的子元素，当用户滚动到 trackedEl 时，将调用回调 onScrollToElement。
• scrollerEl.scrollTop：垂直滚动的像素数。这是卷轴的“进步”。在滚动之前，该值为0，当您向下滚动时，该值会增加您滚动的像素。
• trackedEl.offsetTop + trackedEl.offsetHeight - scrollerEl.offsetHeight：您必须向下滚动才能看到 trackedEl 的像素数
  • trackedEl.offsetTop：scrollerEl 顶部位置到 trackedEl 顶部位置的距离（以像素为单位）。
  • trackedEl.offsetHeight：trackedEl 的高度，包括内边距和边框。这意味着您必须在 onScrollToElement 触发之前完全看到 trackedEl
  • scrollerEl.offsetHeight：scrollerEl 的高度。减去这个是因为在开始滚动之前，您已经看到了容器的顶部。

用法

const classes = useStyles();
const [showButton, setShowButton] = useState(false);

return (
  <Scroller
    className={classes.container}
    trackIds={["myButton"]}
    onScrollToElement={(el) => {
      if (el.id === "myButton" && !showButton) {
        setShowButton(true);
      }
    }}
  >
    <div className={classes.topContent}>
      <Typography variant="h4">Top content</Typography>
    </div>
    <div className={classes.buttonContent}>
      <Grow in={showButton}>
        <Button id="myButton" variant="contained" color="primary">
          Primary
        </Button>
      </Grow>
    </div>
  </Scroller>
);

道具：

• trackIds：Scroller 中要跟踪的元素的 id 列表。如果我们跟踪Scroller 中的每个元素，将会影响复杂UI 中的性能。

• onScrollToElement：当被跟踪元素滚动到视图中时执行的回调。

现场演示