Bug: element.current.scrollIntoView() not working as expected in chrome. #23396

karthik2265 · 2022-03-02T04:19:18Z

Hey 🙋‍♂️

I have built a simple chatbot using react, and when the user sends a message i want to show the last message in the chatWindow component, so I used the following code:

useEffect(
    function () {
      if (lastmessageRef.current !== null) {
        lastmessageRef.current.scrollIntoView()
      }
    },
    [lastmessageRef]
  )

It works as expected in edge and Firefox, but on chrome it is behaving weird
llink-to-the-chatbot: https://karthik2265.github.io/worlds-best-chatbot/
github-repo-link: https://github.com/karthik2265/worlds-best-chatbot

Thank you

eps1lon · 2022-03-02T10:01:45Z

Note that lastmessageRef as a dependency won't do anything and can be removed. The effect won't fire if lastmessageRef.current changes.

Could you include a video of the behavior in Firefox and Chrome and explain with words what's "weird" about this behavior?
Also please include the exact version of those browsers and the operating system you're using.

Bonus: Could you convert the repro into a codesandbox.io? Makes it easier to debug the issue.

noviceGuru · 2022-09-16T06:42:11Z

I'm having the same problem.
scrollIntoView api doesn't work inside useEffect, while it fires by onClick.
Worth mentioning that it works in Firefox.
Here is the code:

import React, { useEffect, useRef, useState } from 'react'
import FirstPage from './components/FirstPage'
import SecondPage from './components/SecondPage'
import ThirdPage from './components/ThirdPage'

import './App.css'

const App = () => {
  const [atPage, setAtPage] = useState<number>(0)
  const refs = useRef<(null | HTMLDivElement)[]>([])
  const pages = [<FirstPage />, <SecondPage />, <ThirdPage />]

  const handleWheel = (event: any) => {
    console.log(event.deltaY > 0 ? 'down' : 'up')
    setAtPage(atPage => {
      let atPageCopied = JSON.parse(JSON.stringify(atPage))
      return event.deltaY < 0 ? (atPage > 0 ? atPageCopied - 1 : atPage) : (atPage < pages.length - 1 ? atPageCopied + 1 : atPage)
    })
  }
  const scrollItThere = (atPage: number) => refs.current[atPage]?.scrollIntoView({ block: 'start', behavior: 'smooth' })

  useEffect(() => {
    console.log(atPage)
    scrollItThere(atPage)
  }, [atPage])


  return (
    <div onWheel={handleWheel} >
      {pages.map((el, index) => <div
        key={index}
        ref={i => refs.current[index] = i}
        onClick={() => refs.current[0]?.scrollIntoView({ block: 'start', behavior: 'smooth' })}
      >
        {el}
      </div>)}
    </div>
  )
}

export default App

vigneshvjay · 2022-09-26T08:23:25Z

I'm having the same problem. scrollIntoView api doesn't work inside useEffect, while it fires by onClick. Worth mentioning that it works in Firefox. Here is the code:

import React, { useEffect, useRef, useState } from 'react'
import FirstPage from './components/FirstPage'
import SecondPage from './components/SecondPage'
import ThirdPage from './components/ThirdPage'

import './App.css'

const App = () => {
  const [atPage, setAtPage] = useState<number>(0)
  const refs = useRef<(null | HTMLDivElement)[]>([])
  const pages = [<FirstPage />, <SecondPage />, <ThirdPage />]

  const handleWheel = (event: any) => {
    console.log(event.deltaY > 0 ? 'down' : 'up')
    setAtPage(atPage => {
      let atPageCopied = JSON.parse(JSON.stringify(atPage))
      return event.deltaY < 0 ? (atPage > 0 ? atPageCopied - 1 : atPage) : (atPage < pages.length - 1 ? atPageCopied + 1 : atPage)
    })
  }
  const scrollItThere = (atPage: number) => refs.current[atPage]?.scrollIntoView({ block: 'start', behavior: 'smooth' })

  useEffect(() => {
    console.log(atPage)
    scrollItThere(atPage)
  }, [atPage])


  return (
    <div onWheel={handleWheel} >
      {pages.map((el, index) => <div
        key={index}
        ref={i => refs.current[index] = i}
        onClick={() => refs.current[0]?.scrollIntoView({ block: 'start', behavior: 'smooth' })}
      >
        {el}
      </div>)}
    </div>
  )
}

export default App

This works like a charm. Thanks buddy

ValenW · 2023-01-08T02:47:07Z

Come accross this issue with

React: 18.2.0
Chrome: Version 108.0.5359.125 (Official Build) (64-bit)
FireFox Developer Edition 109.0b9

, that element.current.scrollIntoView works in FF but not in Chrome, is there any progress?

hwangyena · 2023-01-10T08:20:20Z

I had the same problem
So I solved this by using setTimeout. (The flicker looks weird, but it works.)

// move to todo post
  useEffect(() => {
      ...
      const timer = setTimeout(() => {
      const todoPost = document.querySelector(`[data-post="${selectedTodoPost}"]`); 

      if (!todoPost) {
        return;
      }

      todoPost.scrollIntoView({ block: 'center' });
    }, 500);

    return () => clearTimeout(timer);
  }, [...]);

jalexy12 · 2023-02-03T00:55:39Z

@hwangyena cool little thing I found out -- you can do what you did setTimeout(..., 0) and it works as well without delay, at least in my use case.

It's basically just a trick to defer until next tick in JS.

eugenegodun · 2023-02-09T14:43:44Z

I had the same problem and managed to fix it by using the scroll method for the parent node instead of scrollIntoView for the children node:

const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
        const scrollToTheBottom = () => {
            const scrollEl = ref.current;
            scrollEl?.scroll({
                top: scrollEl?.scrollHeight,
                behavior: 'smooth',
            });
        };
        scrollToTheBottom();
}, []);

return (
        <Wrap>
            <Scroll ref={ref}>
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
                <MessageGroup messages={messagesIncome} />
            </Scroll>
        </Wrap>
);

Works fine in Firefox, Chrome, Safari, Edge

scroll2.mp4

danielo515 · 2023-02-10T12:04:10Z

The problem doesn't seem to be limited to lastmessageRef.current if you fetch the component by ID, it also does not work on chrome, but works fine in firefox.

ajoslin103 · 2023-02-26T23:47:23Z

Not working in Electron 19 (Chromium)

This was working in React 16, I've since updated the project to React 18

pjm4 · 2023-03-06T17:06:33Z

For me it works if I remove the behavior: 'smooth', prop, however, I really want the smooth scrolling behaviour :(

subhamayd2 · 2023-03-08T12:20:48Z

@pjm4 Yeah, that was the case for me as well.

This is what I did as a workaround:

const [shouldScrollToRow, setShouldScrollToRow] = useState(false);

    useEffect(() => {
        if (shouldScrollToRow) {
            setTimeout(() => {
                elemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
            }, 100);
            setShouldScrollToRow(false);
        }
    }, [shouldScrollToRow]);

    useEffect(() => {
        // Listening for items getting added
        if (itemsUpdated) {
            setShouldScrollToRow(true);
            setItemsUpdated(false);
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [itemsUpdated]);

Jerry-qiqi · 2023-04-28T01:42:54Z

I want to know why this is happening

jordanl17 · 2023-05-12T15:59:48Z

A workaround I've found it to use window.requestAnimationFrame:

useEffect(() => {
  if (itemsUpdated) {
    window.requestAnimationFrame(() => 
      elRef.current?.scrollIntoView()
    )
  }
}, [])

mateussilva92 · 2023-05-22T18:25:26Z

Just wanted to shed some light into this issue and why it can probably be closed.

This has nothing to do with react. This is a problem that is related to the chromium implementation of the scrollIntoView method.
There's been some open issues for a long time in the chromium project regarding this issue.

https://bugs.chromium.org/p/chromium/issues/detail?id=1121151
https://bugs.chromium.org/p/chromium/issues/detail?id=1043933
https://bugs.chromium.org/p/chromium/issues/detail?id=833617

So from what I've got from all the testing and searching the last few days is that chromium based browsers interrupt the scrollIntoView when any other scroll event is triggered.

This only happens with the scrollIntoView method, the scrollTo and scroll methods don't suffer from this issue.
You can see and test this by yourself on the following fiddle.

https://jsfiddle.net/2bnspw8e/8/

So then what's a solution if you want to keep the simplicity of scrollIntoView and have other scroll happen at the same time?

There is a ponyfill version of this method which reimplements it using the non broken scroll method.

I hope this clarifies what's actually happening behind the scene and provides a solution while we all wait for a chromium fix.

ajoslin103 · 2023-05-23T11:51:19Z

Thanks for the digging and, I always wanted a one-trick pony!

This shows up at just the right time!

Cheers!

- switch from icon libraries to using custom icon SVGs- add's autofocus prop for ChatInput - fix scroll behavior in ChatPanel: (scrollIntoView issue with Chrome, but works in other browser like safari) facebook/react#23396 - switch from `yext/react-components`'s Markdown component to our own Markdown component since they will be removing that soon and `yext/react-components` also contains other packages/licenses that we don't want (e.g. mapbox) - Generate third party license file for the library J=CLIP-192 TEST=manual&auto see that scroll behavior works as expected in Chrome and Safari see that autofocus for ChatInput is off by default (rendering Panel way down in a page and see that it doesn't jump to it on load) see that markdown is handled properly see the icons are rendered as expected

bn1ck · 2023-09-28T19:26:13Z

I ended up creating my own helper function.

export const smoothScroll = (targetY: number, duration: number) => {
  const startingY = window.pageYOffset;
  const diff = targetY - startingY;
  let start: number;

  window.requestAnimationFrame(function step(timestamp) {
    if (!start) start = timestamp;
    const time = timestamp - start;
    const percent = Math.min(time / duration, 1);

    window.scrollTo(0, startingY + diff * percent);

    if (time < duration) {
      window.requestAnimationFrame(step);
    }
  });
}

To call the function i use the following

if (viewerRef.current) {
      const top = viewerRef.current.offsetTop;
      smoothScroll(top, 500);
}

iuriikomarov · 2023-12-28T00:45:26Z

IMO almost all the answers above are not correct.

You are trying to invoke scrolling in Effect but it should be done in LayoutEffect.

Function inside effect executes in parallel to DOM update commits and in 99% it will be invoked faster. So normally real DOM (according to the vDOM built up with your render function) is not ready yet at that point of time. This is why "workarounds" using setTimeout work somehow. But using LayoutEffect is more accurate.

github-actions · 2024-04-10T08:04:12Z

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

danielo515 · 2024-04-10T14:57:14Z

this is not stale, because it is not fixed

hypo-thesis · 2024-04-17T11:44:00Z

This is not fixed for sure. behavior: 'smooth' does work on FF but not on Chrome. I have codes to reproduce if you wish.

missalyss · 2024-04-25T20:57:26Z

I want to add that the useRef, useEffect combo didn't work for me (no movement at all, because elementRef.current wasn't defined until after the effect had run). Instead, I updated to useCallback.

  const elementRef = useCallback((domEl) => {
    if (domEl !== null ) {
      domEl.scrollIntoView({
        behavior: 'smooth',
      });
    }
  }, []);

...

<div ref={elementRef} >...</div>

alexpeev9 · 2024-04-27T10:57:18Z

Hello.

After checking different scenarios, I also concluded that there is an issue with the way Chrome behaves with scrollIntoView() when you set the behavior to smooth.

In my case, the scroll randomly stops at the start or middle of the scroll.
A temporary solution for me would be to disable the smooth scroll for Chrome browsers.

const behavior = navigator.userAgent.includes('Chrome') ? 'auto' : 'smooth'
ref.current?.scrollIntoView({ behavior: behavior, block: 'start' })

Qnemes · 2024-06-24T19:43:15Z

In my case I`ve encountered weird behavior with simple onPress event with window.scrollTo({ top: scrollRef.current.offsetTop, behavior: 'smooth' }); So I've wrapped this call with setTimeout 0ms and it fixed unexpected behavior (stops mid scroll) completely.

subzeta · 2024-06-26T18:15:30Z

Hello.

After checking different scenarios, I also concluded that there is an issue with the way Chrome behaves with scrollIntoView() when you set the behavior to smooth.

In my case, the scroll randomly stops at the start or middle of the scroll. A temporary solution for me would be to disable the smooth scroll for Chrome browsers.
const behavior = navigator.userAgent.includes('Chrome') ? 'auto' : 'smooth'
ref.current?.scrollIntoView({ behavior: behavior, block: 'start' })

This was the issue in my case. Thanks mate!

satejbidvai · 2024-09-02T13:59:36Z

Any updates on this?

I still seem to be getting this exact issue on Chrome. Removing behaviour: smooth works.

mmis1000 · 2024-09-04T10:35:33Z

Any updates on this?

I still seem to be getting this exact issue on Chrome. Removing behaviour: smooth works.

You should probably look into related chrome issue instead. This is a chrome bug that has nothing to do with react.

https://issues.chromium.org/issues/325081538

The recent comment says they are changing how smooth in to view smooth work in chrome, which may fix this issue.

scath999 · 2024-09-21T17:33:01Z

Still not working for me in either Chrome or Firefox on desktop.

I enclose an excerpt from some messaging functionality - users can open and close a chat window from a list of available conversations.

The first time I open the window, the content appears but the window doesn't scroll. If I then close and reopen the window it works as intended, as does posting new text to the window.

Note: The placement of scrollIntoView() is in two different places within these methods - this is intentionally done to test the behaviour; afaik both should work, neither does.

     const scroll_position = useRef()
 
     (...) 
     
     function GetMessageThread(thread_id){
  
        axios.post("/api/get_message_thread", {
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                withCredentials: true
            },
            body: JSON.stringify({"thread_id" : thread_id})
        })
        .then((response) => {
            if (response.statusText == "OK"){
                setMessageList(response.data['message_list'])
                console.log(":: GetMessageThread :: Scrolling to bottom of window ")
                console.log("-- scroll_position.current =", scroll_position.current)
                scroll_position.current.scrollIntoView()
              
            }
        })
    }
    
   

    function NewMessage(e){
        e.preventDefault();

        var payload = {"message" : newMessage, "thread_id" : thread_id}
        axios.post('/api/new_message', {
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                withCredentials: true
            },
            body: JSON.stringify(payload)
        }).then((response) =>{
            if (response.statusText == "OK"){
               console.log("response from new_message = OK")
              
            }
        })

        setNewMessage('')
        console.log(":: NewMessage :: Scrolling to bottom of window")
        scroll_position.current.scrollIntoView({ behavior : 'smooth'})

    }
    
    return(
       <>
        (...)
         <DialogContent>            
                {messageList.map((msg, i) => 
                    {
                        return (<ChatMessage key={i} messageObj={msg}  />)
                    }
                )}
                <span id="scroll_pos" name="scroll_pos" ref={scroll_position}></span>
            </DialogContent>
        (...)
        </>
    )

Output in console, whether on first or subsequent opens, is as follows :

:: GetMessageThread :: Scrolling to bottom of window 
-- scroll_position.current = <span id="scroll_pos" name="scroll_pos"></span>

When you reload the page, once the page scrolled to the <h1> that has `ref`, but it scrolls back to the top of the page. It may the problem on the Chrome. facebook/react#23396

Kodiererin · 2024-12-02T13:57:42Z

Still not working for me in either Chrome or Firefox on desktop.

I enclose an excerpt from some messaging functionality - users can open and close a chat window from a list of available conversations.

The first time I open the window, the content appears but the window doesn't scroll. If I then close and reopen the window it works as intended, as does posting new text to the window.

Note: The placement of scrollIntoView() is in two different places within these methods - this is intentionally done to test the behaviour; afaik both should work, neither does.

     const scroll_position = useRef()
 
     (...) 
     
     function GetMessageThread(thread_id){
  
        axios.post("/api/get_message_thread", {
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                withCredentials: true
            },
            body: JSON.stringify({"thread_id" : thread_id})
        })
        .then((response) => {
            if (response.statusText == "OK"){
                setMessageList(response.data['message_list'])
                console.log(":: GetMessageThread :: Scrolling to bottom of window ")
                console.log("-- scroll_position.current =", scroll_position.current)
                scroll_position.current.scrollIntoView()
              
            }
        })
    }
    
   

    function NewMessage(e){
        e.preventDefault();

        var payload = {"message" : newMessage, "thread_id" : thread_id}
        axios.post('/api/new_message', {
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                withCredentials: true
            },
            body: JSON.stringify(payload)
        }).then((response) =>{
            if (response.statusText == "OK"){
               console.log("response from new_message = OK")
              
            }
        })

        setNewMessage('')
        console.log(":: NewMessage :: Scrolling to bottom of window")
        scroll_position.current.scrollIntoView({ behavior : 'smooth'})

    }
    
    return(
       <>
        (...)
         <DialogContent>            
                {messageList.map((msg, i) => 
                    {
                        return (<ChatMessage key={i} messageObj={msg}  />)
                    }
                )}
                <span id="scroll_pos" name="scroll_pos" ref={scroll_position}></span>
            </DialogContent>
        (...)
        </>
    )

Output in console, whether on first or subsequent opens, is as follows :

:: GetMessageThread :: Scrolling to bottom of window 
-- scroll_position.current = <span id="scroll_pos" name="scroll_pos"></span>

I also faced this same issue, had to create my own custom function,

JulioMacedo0 · 2024-12-05T12:15:51Z

In my use case, the following code snippet worked very well:

divRef.current?.scroll({
  top: divRef.current?.scrollHeight,
  behavior: 'smooth'
});

say8425 · 2025-01-03T06:20:49Z

setTimeout with window.scrollTo works better.

useEffect(() => {
  if (itemsUpdated) {
    setTimeout(() => {
      window.scrollTo({
        top: ref.current.offsetTop,
      });
    }, 100);
  }
}, [
  itemsUpdated // when you needed
]);

Ref: facebook/react#23396

lulucassiu2 · 2025-01-04T05:41:13Z

[email protected]

Ref: facebook/react#23396

karthik2265 added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Mar 2, 2022

eps1lon added Component: DOM Resolution: Needs More Information labels Mar 2, 2022

yen-tt mentioned this issue Jun 6, 2023

Custom icon SVG and QA feedback yext/chat-ui-react#12

Merged

acd02 mentioned this issue Aug 8, 2023

fix: use performance observer to ensure to scroll only when main thread is not blocked adevinta/spark#1231

Merged

9 tasks

shibaev mentioned this issue Sep 27, 2023

[Bug] Randomly failed to scroll to anchor when opening docfx site's anchor link dotnet/docfx#9150

Closed

graup mentioned this issue Mar 12, 2024

Add support for scroll-margin and scroll-padding scroll-into-view/scroll-into-view-if-needed#386

Open

github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Apr 10, 2024

github-actions bot removed the Resolution: Stale Automatically closed due to inactivity label Apr 11, 2024

fundon mentioned this issue Sep 22, 2024

fix: better scroll to target toeverything/blocksuite#8423

Merged

mnvr added a commit to ente-io/ente that referenced this issue Jan 3, 2025

Add workaround for Chrome smooth scroll bug by doing it twice

be12a70

Ref: facebook/react#23396

mnvr added a commit to ente-io/ente that referenced this issue Jan 6, 2025

Add workaround for Chrome smooth scroll bug by doing it twice

d0ab487

Ref: facebook/react#23396

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug: element.current.scrollIntoView() not working as expected in chrome. #23396

Bug: element.current.scrollIntoView() not working as expected in chrome. #23396

karthik2265 commented Mar 2, 2022

eps1lon commented Mar 2, 2022

noviceGuru commented Sep 16, 2022 •

edited

Loading

vigneshvjay commented Sep 26, 2022

ValenW commented Jan 8, 2023 •

edited

Loading

hwangyena commented Jan 10, 2023

jalexy12 commented Feb 3, 2023

eugenegodun commented Feb 9, 2023 •

edited

Loading

danielo515 commented Feb 10, 2023

ajoslin103 commented Feb 26, 2023

pjm4 commented Mar 6, 2023

subhamayd2 commented Mar 8, 2023

Jerry-qiqi commented Apr 28, 2023

jordanl17 commented May 12, 2023

mateussilva92 commented May 22, 2023 •

edited

Loading

ajoslin103 commented May 23, 2023

bn1ck commented Sep 28, 2023

iuriikomarov commented Dec 28, 2023 •

edited

Loading

github-actions bot commented Apr 10, 2024

danielo515 commented Apr 10, 2024

hypo-thesis commented Apr 17, 2024

missalyss commented Apr 25, 2024

alexpeev9 commented Apr 27, 2024

Qnemes commented Jun 24, 2024

subzeta commented Jun 26, 2024 •

edited

Loading

satejbidvai commented Sep 2, 2024

mmis1000 commented Sep 4, 2024 •

edited

Loading

scath999 commented Sep 21, 2024

Kodiererin commented Dec 2, 2024

JulioMacedo0 commented Dec 5, 2024

say8425 commented Jan 3, 2025 •

edited

Loading

lulucassiu2 commented Jan 4, 2025

Bug: element.current.scrollIntoView() not working as expected in chrome. #23396

Bug: element.current.scrollIntoView() not working as expected in chrome. #23396

Comments

karthik2265 commented Mar 2, 2022

eps1lon commented Mar 2, 2022

noviceGuru commented Sep 16, 2022 • edited Loading

vigneshvjay commented Sep 26, 2022

ValenW commented Jan 8, 2023 • edited Loading

hwangyena commented Jan 10, 2023

jalexy12 commented Feb 3, 2023

eugenegodun commented Feb 9, 2023 • edited Loading

danielo515 commented Feb 10, 2023

ajoslin103 commented Feb 26, 2023

pjm4 commented Mar 6, 2023

subhamayd2 commented Mar 8, 2023

Jerry-qiqi commented Apr 28, 2023

jordanl17 commented May 12, 2023

mateussilva92 commented May 22, 2023 • edited Loading

ajoslin103 commented May 23, 2023

bn1ck commented Sep 28, 2023

iuriikomarov commented Dec 28, 2023 • edited Loading

github-actions bot commented Apr 10, 2024

danielo515 commented Apr 10, 2024

hypo-thesis commented Apr 17, 2024

missalyss commented Apr 25, 2024

alexpeev9 commented Apr 27, 2024

Qnemes commented Jun 24, 2024

subzeta commented Jun 26, 2024 • edited Loading

satejbidvai commented Sep 2, 2024

mmis1000 commented Sep 4, 2024 • edited Loading

scath999 commented Sep 21, 2024

Kodiererin commented Dec 2, 2024

JulioMacedo0 commented Dec 5, 2024

say8425 commented Jan 3, 2025 • edited Loading

lulucassiu2 commented Jan 4, 2025

noviceGuru commented Sep 16, 2022 •

edited

Loading

ValenW commented Jan 8, 2023 •

edited

Loading

eugenegodun commented Feb 9, 2023 •

edited

Loading

mateussilva92 commented May 22, 2023 •

edited

Loading

iuriikomarov commented Dec 28, 2023 •

edited

Loading

subzeta commented Jun 26, 2024 •

edited

Loading

mmis1000 commented Sep 4, 2024 •

edited

Loading

say8425 commented Jan 3, 2025 •

edited

Loading