如何在使用 React Infinite Scroll Component 时永久显示 Y 滚动条？答案

【问题标题】：How can I permanently display Y scroll bar while using React Infinite Scroll Component?如何在使用 React Infinite Scroll Component 时永久显示 Y 滚动条？
【发布时间】：2021-02-24 19:07:14
【问题描述】：

我之前尝试在父 div 中使用overflow-y: scroll;，确实永久显示了 y 滚动条，但它阻止了 React Infinite Scroll 组件触发“下一个”功能。

我想这样做的原因是，如果没有它，在浏览网站时屏幕会闪烁。这是由于滚动条在没有结果时隐藏（在加载过程中，某些页面没有很多结果）而在结果很多时显示。

【问题讨论】：

看起来 react-infinite-scroll-component 将 style 属性应用于它呈现的（几乎）最外层的 div。 This post 可能会有所帮助，它提供了有关如何设置 div 样式以便始终显示滚动条的说明。

标签： reactjs react-infinite-scroll-component

【解决方案1】：

我发现了问题所在。我将 overflow-y: scroll; 添加到父布局 div 但未添加到 html 正文。如果我将它添加到正文中，那么我可以使用overflow-y: scroll 永久显示滚动条，并且 React Infinite Scroll Component 下一个道具仍然会在滚动时触发。

【讨论】：