How can I scroll a div to be visible in ReactJS

Question

I have a popup list which is a div that contains a vertical list of child divs   I have added up down keyboard navigation to change which child is currently highlighted   Right now  if I press the down key enough times  the highlighted item is no longer visible   The same thing also occurs with the up key if the view is scrolled   What is the right way in React to automatically scroll a child div into view

User · Answer

To build on  Michelle Tilley s answer  I sometimes want to scroll if the user s selection changes  so I trigger the scroll on componentDidUpdate  I also did some math to figure out how far to scroll and whether scrolling was needed  which for me looks like the following    x000D   x000D    componentDidUpdate     x000D      let panel  node  x000D      if  this refs selectedSection  amp  amp  this refs selectedItem    x000D           This is the container you want to scroll            x000D        panel   this refs listPanel  x000D           This is the element you want to make visible w i the container x000D           Note  You can nest refs here if you want an item w i the selected item           x000D        node   ReactDOM findDOMNode this refs selectedItem   x000D        x000D   x000D      if  panel  amp  amp  node  amp  amp  x000D         node offsetTop  gt  panel scrollTop   panel offsetHeight    node offsetTop  lt  panel scrollTop     x000D        panel scrollTop   node offsetTop - panel offsetTop  x000D        x000D      x000D   x000D   x000D

User · Answer

Another example which uses function in ref rather than string  class List extends React Component     constructor props        super props       this state     items     index  0        this  nodes   new Map         this handleAdd   this handleAdd bind this       this handleRemove   this handleRemove bind this           handleAdd         let startNumber   0      if  this state items length          startNumber   this state items this state items length - 1              let newItems   this state items splice 0       for  let i   startNumber  i  lt  startNumber   100  i            newItems push i              this setState   items  newItems            handleRemove         this setState   items  this state items slice 1             handleShow i        this setState  index  i        const node   this  nodes get i       console log this  nodes       if  node          ReactDOM findDOMNode node  scrollIntoView  block   end   behavior   smooth                  render         return         lt div gt           lt ul gt  this state items map  item  i    gt    lt Item key  i  ref   element    gt  this  nodes set i  element   gt  item  lt  Item gt     lt  ul gt           lt button onClick  this handleShow bind this  0   gt 0 lt  button gt           lt button onClick  this handleShow bind this  50   gt 50 lt  button gt           lt button onClick  this handleShow bind this  99   gt 99 lt  button gt           lt button onClick  this handleAdd  gt Add lt  button gt           lt button onClick  this handleRemove  gt Remove lt  button gt           this state index         lt  div gt                class Item extends React Component     render         return   lt li ref   element   gt  this listItem   element   gt         this props children       lt  li gt            Demo  https   codepen io anon pen XpqJVe

User · Answer

I assume that you have some sort of List component and some sort of Item component  The way I did it in one project was to let the item know if it was active or not  the item would ask the list to scroll it into view if necessary  Consider the following pseudocode   class List extends React Component     render         return  lt div gt  this props items map this renderItem   lt  div gt          renderItem item        return  lt Item key  item id  item  item                   active  item id     this props activeId                   scrollIntoView  this scrollElementIntoViewIfNeeded    gt         scrollElementIntoViewIfNeeded domNode        var containerDomNode   React findDOMNode this          Determine if  domNode  fully fits inside  containerDomNode          If not  set the container s scrollTop appropriately         class Item extends React Component     render         return  lt div gt something    lt  div gt          componentDidMount         this ensureVisible           componentDidUpdate         this ensureVisible           ensureVisible         if  this props active          this props scrollIntoView React findDOMNode this                  A better solution is probably to make the list responsible for scrolling the item into view  without the item being aware that it s even in a list   To do so  you could add a ref attribute to a certain item and find it with that   class List extends React Component     render         return  lt div gt  this props items map this renderItem   lt  div gt          renderItem item        var active   item id     this props activeId      var props           key  item id        item  item        active  active            if  active          props ref    activeItem             return  lt Item     props    gt         componentDidUpdate prevProps           only scroll into view if the active item changed last render     if  this props activeId     prevProps activeId          this ensureActiveItemVisible                 ensureActiveItemVisible         var itemComponent   this refs activeItem      if  itemComponent          var domNode   React findDOMNode itemComponent         this scrollElementIntoViewIfNeeded domNode                scrollElementIntoViewIfNeeded domNode        var containerDomNode   React findDOMNode this          Determine if  domNode  fully fits inside  containerDomNode          If not  set the container s scrollTop appropriately          If you don t want to do the math to determine if the item is visible inside the list node  you could use the DOM method scrollIntoView   or the Webkit-specific scrollIntoViewIfNeeded  which has a polyfill available so you can use it in non-Webkit browsers

User · Answer

I had a NavLink that I wanted to when clicked will scroll to that element like named anchor does  I implemented it this way     lt NavLink onClick       gt  this scrollToHref  plans    gt Our Plans lt  NavLink gt    scrollToHref    element    gt       let node      if element      how          node   ReactDom findDOMNode this refs how         console log this refs       else  if element      plans          node   ReactDom findDOMNode this refs plans        else  if element      about          node   ReactDom findDOMNode this refs about              node scrollIntoView  block   start   behavior   smooth            I then give the component I wanted to scroll to a ref like this   lt Investments ref  plans   gt

User · Answer

With reacts Hooks    Import    import ReactDOM from  react-dom   import React   useRef  from  react      Make new hook    const divRef   useRef lt HTMLDivElement gt  null      Add new Div    lt div ref  divRef   gt     Scroll function    const scrollToDivRef         gt        let node   ReactDOM findDOMNode divRef current  as Element      node scrollIntoView  block   start   behavior   smooth

User · Answer

For React 16  the correct answer is different from earlier answers   class Something extends Component     constructor props        super props       this boxRef   React createRef           render         return          lt div ref  this boxRef    gt                 Then to scroll  just add  after constructor    componentDidMount       if  this props active       whatever your test might be     this boxRef current scrollIntoView            Note  You must use   current   and you can send options to scrollIntoView   scrollIntoView     behavior   smooth     block   center     inline   center          Found at http   www albertgao xyz 2018 06 07 scroll-a-not-in-view-component-into-the-view-using-react    Reading the spec  it was a little hard to suss out the meaning of block and inline  but after playing with it  I found that for a vertical scrolling list  block   end  made sure the element was visible without artificially scrolling the top of my content off the viewport  With  center   an element near the bottom would be slid up too far and empty space appeared below it  But my container is a flex parent with justify   stretch  so that may affect the behavior  I didn t dig too much further  Elements with overflow hidden will impact how the scrollIntoView acts  so you ll probably have to experiment on your own   My application has a parent that must be in view and if a child is selected  it then also scrolls into view  This worked well since parent DidMount happens before child s DidMount  so it scrolls to the parent  then when the active child is rendered  scrolls further to bring that one in view

User · Answer

Just in case someone stumbles here  I did it this way     componentDidMount        const node   this refs trackerRef      node  amp  amp  node scrollIntoView  block   end   behavior   smooth          componentDidUpdate         const node   this refs trackerRef      node  amp  amp  node scrollIntoView  block   end   behavior   smooth           render         return           lt div gt           messages map  msg  index    gt              return                lt Message key  index  msgObj  msg                    lt p gt some test text lt  p gt                  lt  Message gt                                    lt div style   height   30px    id   tracker  ref  trackerRef  gt  lt  div gt         lt  div gt              scrollIntoView is native DOM feature link  It will always shows tracker div

User · Answer

I m just adding another bit of info for others searching for a Scroll-To capability in React  I had tied several libraries for doing Scroll-To for my app  and none worked from my use case until I found react-scrollchor  so I thought I d pass it on  https   github com bySabi react-scrollchor

User · Answer

In you keyup down handler you just need to set the scrollTop property of the div you want to scroll to make it scroll down  or up    For example   JSX     lt div ref  foo  gt  content  lt  div gt   keyup down handler   this refs foo getDOMNode   scrollTop    10  If you do something similar to above  your div will scroll down 10 pixels  assuming the div is set to overflow auto or scroll in css  and your content is overflowing of course    You will need to expand on this to find the offset of the element inside your scrolling div that you want to scroll the div down to  and then modify the scrollTop to scroll far enough to show the element based on it s height     Have a look at MDN s definitions of scrollTop  and offsetTop here   https   developer mozilla org en-US docs Web API Element scrollTop  https   developer mozilla org en-US docs Web API HTMLElement offsetTop

[javascript] How can I scroll a div to be visible in ReactJS?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to scroll

Examples related to reactjs