0

I previously tried using overflow-y: scroll; in a parent div, which indeed permanently displayed the y scroll bar, but it stopped the React Infinite Scroll Component from triggering the "next" function.

The reason I want to do this is that, without it, the screen flickers while navigating the site. This is caused by the scroll bar being hidden when there are no results (during loading, some pages don't have many results) and being displayed when there are lots of results.

Khawaja Asim
  • 1,327
  • 18
  • 38
Craig McAuliffe
  • 11
  • 2
  • It looks like react-infinite-scroll-component applies the `style` prop to the (almost) outermost div that it renders. [This post](https://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar) may be helpful, it gives instructions on how to style a div so the scroll bar is always displayed. – Abe Feb 24 '21 at 20:05

1 Answers1

1

I figured out what the problem was. I was adding overflow-y: scroll; to a parent layout div but not to the html body. If I add it to the body, then I can permanently display the scroll bar with overflow-y: scroll and the React Infinite Scroll Component next prop is still triggered on scroll.

Craig McAuliffe
  • 11
  • 2