Question: focus on the infinityScroll component on the page load

[ihomp]

InfinityScroll in the scrollable element and has scrollableTarget="scrollableDiv"

      <div id="scrollableDiv">
          <InfiniteScroll
            scrollableTarget="scrollableDiv"
         >

how to focus on it on the load, so it will be scrollable by the pageDown

if tried useRef and focus(), tabIndex
nothing helps.

[iamdarshshah]

This is a browser focus question rather than an infinite scroll issue. To make a scrollable container keyboard-navigable with Page Down on load, you need to give it focus programmatically. Using a ref and calling .focus() should work as long as the element has a tabIndex attribute set (e.g., tabIndex={0}).

const scrollRef = useRef(null);

useEffect(() => {
  scrollRef.current?.focus();
}, []);

<div id="scrollableDiv" ref={scrollRef} tabIndex={0}>
  <InfiniteScroll scrollableTarget="scrollableDiv" ...>

Closing as a usage question. Feel free to reopen if you believe there is a component-level issue.