Get div s offsetTop positions in React

Question

I am trying to implement a List view in React   What I am trying to achieve is that to store the list headers informations and register the components and register the scroll event  every time when user scroll the window  I d like to take out the stored div and re-calculate the offsetTop data   The problem now is that  I found the console just print out the initial value  the value is fixed and never changed  offsetTop data never change in onscroll function   Anyone suggest how to get latest offsetTop from the  instances object   import React    Component   from  react   import ListHeader from    lib ListHeader   import ListItems from    lib ListItems    const styles        height    400px      overflowY    auto      outline    1px dashed red      width    40       class HeaderPosInfo     constructor headerObj  originalPosition  originalHeight        this headerObj   headerObj      this originalPosition   originalPosition      this originalHeight   originalHeight          export default class ReactListView extends Component     static defaultProps         events    scroll    mousewheel    DOMMouseScroll    MozMousePixelScroll    resize    touchmove    touchend         instances          positionMap  new Set         topPos          topWrapper           static propTypes         data  React PropTypes array isRequired      headerAttName  React PropTypes string isRequired      itemsAttName  React PropTypes string isRequired      events  React PropTypes array       instances  React PropTypes array       positionMap  React PropTypes object       topPos  React PropTypes string       topWrapper  React PropTypes object         state         events  this props events       instances  this props  instances       positionMap  this props  positionMap       topPos  this props  topPos        componentDidMount         this initStickyHeaders           componentWillUnmount             componentDidUpdate             refsToArray ctx  prefix       let results           for  let i 0  i           let ref   ctx refs prefix    -    String i          if  ref  results push ref         else return results               initHeaderPositions            Retrieve all instance of headers and store position info     this props  instances forEach  k   gt         this props  positionMap add new HeaderPosInfo            k             k refs header getDOMNode   offsetTop            k refs header getDOMNode   offsetHeight                         let it   this props  positionMap values        let first   it next        this props  topPos   first value originalPosition      this props  topWrapper   first value headerObj         initStickyHeaders          this props  instances   this refsToArray this   ListHeader        this initHeaderPositions            Register events listeners with the listview div     this props events forEach type   gt          if  window addEventListener            React findDOMNode this refs listview  addEventListener type  this onScroll bind this   false           else           React findDOMNode this refs listview  attachEvent  on    type  this onScroll bind this   false                          onScroll             update current header positions and apply fixed positions to the top one     console log 1       let offsetTop    React findDOMNode this props  instances 0  refs header  offsetTop          render         const   data  headerAttName  itemsAttName     this props      let  refi   0      let makeRef        gt          return  ListHeader-      refi                 return          lt div ref  listview  style  styles  gt                  Object keys data  map k   gt            const header   data k  headerAttName           const items    data k  itemsAttName             return                lt ul key  k  gt                      lt ListHeader ref  makeRef    header  header    gt                 lt ListItems  items  items    gt               lt  ul gt                                         lt  div gt                 The whole source code is on Github  you can clone and compile it from here   Github

User · Accepted Answer

You may be encouraged to use the Element.getBoundingClientRect() method to get the top offset of your element. This method provides the full offset values (left, top, right, bottom, width, height) of your element in the viewport.

Check the John Resig's post describing how helpful this method is.

User · Answer

A quicker way if you are using React 16 3 and above is by creating a ref in the constructor  then attaching it to the component you wish to use with as shown below       constructor props               create a ref    this someRefName   React createRef         onScroll    let offsetTop   this someRefName current offsetTop       render         lt Component ref  this someRefName    gt

User · Answer

A better solution with ref to avoid findDOMNode that is discouraged       onScroll         let offsetTop    this instance getBoundingClientRect   top        render          lt Component ref   el    gt  this instance   el     gt

User · Answer

I do realize that the author asks question in relation to a class-based component  however I think it s worth mentioning that as of React 16 8 0  February 6  2019  you can take advantage of hooks in function-based components   Example code   import   useRef   from  react   function Component       const inputRef   useRef      return        lt input ref  inputRef    gt       lt div       onScroll       gt            const   offsetTop     inputRef current                           gt

User · Answer

import ReactDOM from  react-dom             componentDidMount         var n   ReactDOM findDOMNode this       console log n offsetTop         You can just grab the offsetTop from the Node

User · Answer

Eugene s answer uses the correct function to get the data  but for posterity I d like to spell out exactly how to use it in React v0 14   according to this answer       import ReactDOM from  react-dom             componentDidMount         var rect   ReactDOM findDOMNode this         getBoundingClientRect         Is working for me perfectly  and I m using the data to scroll to the top of the new component that just mounted

[javascript] Get div's offsetTop positions in React

Examples related to javascript

Examples related to scroll

Examples related to reactjs

Examples related to offset