Question

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

我的情况：仅当滚动是一个选项时，我想有条件地渲染“返回顶部”按钮。如果这样的功能不会影响页面，则没有任何意义。

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

Answer 1

卢克。

“滚动是一种选择”，我在这里假设您的意思是“滚动条可见时”。

据我所知，没有任何方法可以使用React API检查滚动条的可见性。有DOM布尔window.scrollbars.visible；但是，我还没有运气。滚动条是否可见似乎总是返回true。以下方法可能对您有用：

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

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

我希望这会有所帮助。

Answer 2

如果在具有滚动条的元素周围有包装纸，则可以检测到宽度差。

<div className="wrapper">
  <div className="scrollingContent">
    Very long content here
  </div>
</div>

const scrollBarWidth = this.wrapper.clientWidth - this.scrollingContent.clientWidth;
this.setState({ scrollBarWidth });

Answer 3

当滚动条可见时，则window.visualViewport.width

var buttonIsVisible = window.visualViewport.width < window.Width;

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

3 个答案: