Question 316747 in Html Question posted in
Some basic documentation can be found here.

Html – React.js div scrollIntoView not smooth

I have a display component that essentially just displays a list of cards. I have another component that fetches a card and adds it to a cards state that the Display component has access to to map and render the cards out. Upon adding a card to cards, I have an empty div at the bottom of the display that I want to scroll into view so users can automatically see the new card without having to scroll. I’m using a ref to get the div reference and using the scrollIntoView({ behavior: 'smooth' }) method but it is not smoothly scrolling. I’ve also tried adding html { scroll-behavior: smooth } as CSS but that doesn’t fix the issue either.

Display.tsx

const Display: React.FC = () => {
  const bottomDivRef = useRef<null | HTMLDivElement>(null)

  // currentSessionThreads is a list of ID associated with a card's information. State is stored using Redux
  const currentSessionThreads = useSelector((store: IRootState) => {
    const currentSession = store.ideator.value.currentSession
    if (currentSession === null) {
      return
    }
    return store.ideator.value.sessionsMap[currentSession].threads
  })
  const threadsMap = useSelector(
    (store: IRootState) => store.ideator.value.threadsMap
  )
  const ideasMap = useSelector(
    (store: IRootState) => store.ideator.value.ideasMap
  )

  // Everytime a new ID is added to currentSessionThreads, scroll the newest card into view.
  useEffect(() => {
    bottomDivRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [currentSessionThreads])

  return (
    <Box flex='1'>
      <VStack w='100%'>
        {currentSessionThreads?.map((threadID, index) => {
          return (
            <IdeaCard
              idea={ideasMap[threadsMap[threadID].idea]}
              ideaNumber={index + 1}
              key={index}
            />
          )
        })}
      </VStack>

      <Box w='100%' h='8rem' ref={bottomDivRef} />
    </Box>
  )
}

When I add a new card via another component that updates the redux store containing the currentSessionThreads, it doesn’t scroll the new content smoothly. It just jumps to it. I’m not sure why this isn’t working.

Tags:

2

Answers


  1. 0

    To address the issue of scrollIntoView({ behavior: 'smooth' }) not smoothly scrolling in your React application, check the following points:

    1. Browser Support: Ensure your browser supports smooth scrolling for
    scrollIntoView.

    2. CSS Conflicts: Check for any CSS that might override the scroll
    behavior.

    3. React Rendering Lifecycle: Use a setTimeout in useEffect to delay
    the scrollIntoView call, allowing time for the DOM to update with
    the new card.

    useEffect(() => {
  setTimeout(() => {
    bottomDivRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, 100);
}, [currentSessionThreads]);

    4. Ref Assignment: Verify that ref is correctly assigned and the
    element exists in the DOM when scrolling.

    5. Component Rerendering: Ensure that your component isn’t rerendering
    unnecessarily, which could interrupt the smooth scroll.

    6. Container Properties: Check the properties of the container elements
    (Box, VStack) for compatibility with smooth scrolling.

    7. Scrollable Ancestor: Confirm there is a scrollable ancestor for the
    bottomDivRef element.

    Test in different browsers and environments to determine if the issue is specific to one. If problems persist, consider alternative methods like window.scrollTo with a smooth scroll polyfill.

    Login or Signup to reply.
  2. 0

    Some workaround that I suggest is:

    1. Check the css from Developer Tools (F12) if there’s any scroll-behavior that conflicted with your code.
    2. You can try adding important tag in your css to make sure it’s applicable.
    3. Try in another browser if it’s still not working.

    Alternative method that you can try is adding scroll-behavior: smooth in html tag via Developer Tools. Then go to console and write window.scrollTo(0,0) to check if it is smooth or not. If smooth then maybe something is wrong in your react code.

    Hope that might helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search