Cannot read property 'getBoundingClientRect' of null

[stephenhmarsh]

My entire app is this:

import React from 'react'
import ReactDOM from 'react-dom'
import Photo from '../components/photo'
import {createClient} from 'contentful'
import ScrollableAnchor from 'react-scrollable-anchor'

// import { configureAnchors } from 'react-scrollable-anchor'

// Offset all anchors by -60 to account for a fixed header
// and scroll more quickly than the default 400ms
// configureAnchors({offset: -60, scrollDuration: 200, keepLastAnchorHash: true})


const client = createClient({
  space: '[redacted]',
  accessToken: '[redacted]'
})


const App = ({assets}) => {
  return (
    <div className="list">
      {
        assets.map(asset =>
          <ScrollableAnchor id={asset.fields.id}>
            <div style={{height: '1000px'}}>test</div>
            {/* <Photo photo={asset}  /> */}
          </ScrollableAnchor>
        )
      }
    </div>
  );
};
  

document.addEventListener('DOMContentLoaded', () => {
  client.getAssets()
  .then((response) => ReactDOM.render(<App assets={response.items}/>, document.getElementById('app')))
  .catch(console.error)
})

I get this error after a scroll stops:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at getElementOffset (scroll.js:14)
    at doesElementContainScrollTop (scroll.js:29)
    at scroll.js:88
    at Array.forEach (<anonymous>)
    at getBestAnchorGivenScrollLocation (scroll.js:86)
    at Manager.handleScroll (Manager.js:76)
    at later (func.js:15)
getElementOffset @ scroll.js:14
doesElementContainScrollTop @ scroll.js:29
(anonymous) @ scroll.js:88
getBestAnchorGivenScrollLocation @ scroll.js:86
Manager.handleScroll @ Manager.js:76
later @ func.js:15
setTimeout (async)
(anonymous) @ func.js:20

(context: I just want something that changes the URL of the page to have a fragment corresponding with whatever picture is currently in the viewport, so that if the link is shared, the browser will scroll to that specific picture. Shouldn't be hard, right?)

[TrebuhD]

I'm having the same problem. I tried wrapping my components in <div>s and converting them to stateless components, nothing works.

Edit: I managed to solve it - in my case it was caused by a child of <ScrollableAnchor /> being null.

[Ranatchai]

I'm having the same problem. In my case, I use the functional component as the child of <ScrollableAnchor /> and the anchor is being null.

It seems that it needs ref to make this work, so I think it's put in the Readme.md.

[NiceGuyNimni]

It happened to me too and the problem in my case was that the child of the ScrollableAnchor had a react ref function. I had to make sure that the child of the ScrollableAnchor had no ref attribute

[nats12]

I'm having this issue at the moment, I have a component as the <ScrollableAnchor> child but it isn't rendering. Can you clarify where this 'ref' would go if this is the solution?

[moritzmock]

@TrebuhD thx for the hint, I used a React.Fragment:

<ScrollableAnchor id="contact">
   <>
      {"CONTACT"}
   </>
</ScrollableAnchor>

After I changed them to a <div> all worked fine!

[Shaker-Hamdi]

@TrebuhD thx for the hint, I used a React.Fragment:

<ScrollableAnchor id="contact">
   <>
      {"CONTACT"}
   </>
</ScrollableAnchor>

After I changed them to a <div> all worked fine!

That's the correct solution. This package doesn't play nice with either React Fragment or multiple child elements.

[mikethejet]

Hi i get the same /similiar error any workaround?

scroll.js:14 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null at getElementOffset (scroll.js:14) at doesElementContainScrollTop (scroll.js:29) at scroll.js:88 at Array.forEach () at getBestAnchorGivenScrollLocation (scroll.js:86) at Manager.handleScroll (Manager.js:76) at later (func.js:15) at sentryWrapped (helpers.js:72)

[Prasanna-naik-97]

Wrap the scrollcontent element which you are targeting with <></> with this. It resolved me