scrollIntoView intermittently not working to land on correct position

I want the page to move down to a specific div on page load.
To achieve this, I am using scrollIntoView. This does work about 50%
of the time but at times the placing is either too high, randomly maybe
by 5 - 10px or too low by 5 - 10px.

Just for testing purposes, I tried same implementation on a simple block of content as follows. This works 100% of the time.

// from another util file
export const scrollTo = (id) => {
  document.getElementById(id).scrollIntoView({
    behavior: 'smooth',
    block: 'start',
    inline: 'nearest',
  });
};

import React, { useEffect } from 'react';
import CustomContent from './CustomContent';

const Indent = () => {
  const scrollRef = React.useRef();
  useEffect(() => {
    scrollTo('scroll-position');
  }, []);

  return (
    <div>
      <h1>Main header</h1>
      <h2>Sub header</h2>
      <span id="scroll-position" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <p>
        Fusce euismod dictum tellus.
      </p>
      <p>
        Sed auctor sodales felis sed venenatis.
      </p>
    </div>
  );
};

export default Indent;

Issue seems to be due to the component I am using has the issue.
This component has animation in it. Right at the top of this component,
there is an animation of a drop down bar like the following: component animation

There is more to this component with a background image plus other text values.

Suspect is due to the time taken for this animation where sometimes it is fine and
sometimes the page load position does not land correctly.

But still don't get why that would matter cos the location I am targeting to scroll to is
a span on its own outside of this component thus was expecting no interferences.

Could I please get some advice on how I could address this?

Not sure if this is enough info. The actual component uses other external components in other typescript modules. Even the minimum viable re production code coming up to over 500+ lines.

This is the component with this issue.

import React, { useEffect } from 'react';
import Offer from '../../offer';
import Content from './Content';
import { scrollTo } from '../utils/scrollTo';

    const Indent = () => {
      useEffect(() => {
        // this scrollTo method coming from another file, 
        // its's implementation is mentioned above.
        scrollTo('scroll-position');
      }, []);
      return (
        <div>
          <span id="scroll-position" />
          {/* This Offer component is the one with animation */}
          {/* There are other components in here which also has animations */}
          <Offer
            data={{
              ray: {
                content: <Content val={"val"} />,
              },
              urls: {
                val: 'a.jpg',
              },
            }}
          />
        </div>
      );
    };

export default Indent;


Read more here: https://stackoverflow.com/questions/67921851/scrollintoview-intermittently-not-working-to-land-on-correct-position

Content Attribution

This content was originally published by Fllappy at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: