如何让一个元素在滚动后消失？

Question

我有一个自定义图标元素，只有当它在表中的特定行悬停时才会显示，但是当我向下滚动而不移动鼠标时，它不会更新 hover 并保持屏幕上的按钮和我表的 header 上方。我怎样才能确保这不会发生？

export const StyleTr = styled.tr`
  z-index: ${({ theme }) => theme.zIndex.userMenu};
  &:hover {
    background-color: ${({ theme, isData }) =>
      isData ? theme.colors.primary.lighter : theme.colors.white};
    div {
      visibility: visible;
    }
    svg[icon] {
      display: initial;
    }
  }
`;

Answer 1

我最近正在为 web 刮板做类似的事情。

这样的事情应该有效：

 function checkIfIconInViewport() { // define current viewport (maximum browser compatability use both calls) const viewportHeight = window.innerHeight || document.documentElement.clientHeight; //Get our Icon let icon = document.getElementById('icon'); let iPos = icon.getBoundingClientRect(); //Show if any part of icon is visible: if (viewportHeight - iPos.top > 0 && iPos.bottom > 0) { icon.style.visibility = visibile; } else { icon.style.visibility = hidden; } //Show only if all of icon is visible: if (iPos.bottom > 0 && iPos.top >= 0) { { icon.style.visibility = visibile; } else { icon.style.visibility = hidden; } //Add && iPos.bottom <= viewportHeight to the if check above for very large elements. { //Run function everytime that the window is scrolled. document.addEventListener('scroll', checkIfIconInViewport);

基本上，每次发生滚动事件时，我们只检查元素的顶部和底部（您的情况下的图标）是否在视口范围内。

负值或大于视口高度的值表示元素的相应部分位于视口边界之外。

如果您正在处理大量对象，希望这会有所帮助。 将您正在跟踪的对象捆绑到一个数组中并在单个 function 调用中检查每个对象以避免为每个单独的对象保存 function 定义可能是有意义的。

编辑：我刚刚意识到我误解了你的问题。 我想你可以只用代码的底部，当滚动事件发生时，将图标的可见性设置为隐藏。 假设您想在用户滚动时隐藏它？

Answer 2

您是否尝试过获取 DOM 的滚动条 position，然后在达到某个滚动条 position 后禁用（删除）该元素？