如何检查 React 中是否存在滚动条？

Question

我还没有看到一个线程可以处理这个问题，至少对于 React 来说是这样。

我的情况：我想仅在可以选择滚动时有条件地渲染返回顶部按钮。如果不能影响页面，那么拥有这样的功能就没有意义。

我能找到的唯一解决方案是 jQuery。我正在使用react-scroll，但找不到任何功能。

Answer 1

检查滚动条在垂直外观中是否可见。

document.body.clientHeight > window.innerHeight

我在 useEffect 中添加了这段代码。

  useEffect(() => {
    if (document.body.clientHeight > window.innerHeight) {
      something()
    }
  }, [state]);

Answer 2

卢克.

我在这里假设“滚动是一个选项”是指“当滚动条可见时”。

据我所知，没有任何方法可以使用 React API 检查滚动条的可见性。有 DOM 布尔值window.scrollbars.visible；然而，我对此并不幸运。它似乎总是返回true滚动条是否可见。以下方法可能适合您：

您可以为 onScroll 设置事件侦听器并检查 window.scrollY。如果window.scrollY > 0，那么您可以有条件地渲染按钮。如果window.scrollY是0，则页面已经滚动到顶部，无需显示按钮。

根据 Web 应用程序的设计，检查一次滚动条可见性（例如，在 上componentDidMount）可能不是最佳选择，因为某些 DOM 元素可能会在组件最初安装后继续加载，并且页面的高度可能会发生变化。

我希望这是有帮助的。