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

Posted 2023-02-22

【中文标题】Material-UI：滚动到元素时触发转换

【英文标题】：Material-UI: Trigger transition when scroll to element

【发布时间】：2021-07-10 07:07:42

【问题描述】：

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

【参考方案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：当被跟踪元素滚动到视图中时执行的回调。

现场演示

【讨论】：

对不起，它不起作用。 onScrollToElement 总是返回 false 我不知道为什么

你的意思是onScrollToElement 永远不会被调用？您是否传递了trackIds 列表并向按钮添加了 id？ @ValiTalpas

是的。我应该在 app.js 中使用 <Scroller /> 吗？ ` `

您是否像我的示例中那样将Scroller 溢出样式设置为auto？ @ValiTalpas

是的，我不知道我做错了什么:(