How to fix the scroll of an element at a certain position if the element is not re-rendered after reload?

Question

css

There is an element with text that is overloaded. Those. text does not fit within the block. Naturally worth it

overflow: scroll

The point is that the text scrolls normally, but the end of this text is displayed, and it is necessary that the beginning is displayed, not the tails.

The functional element in which I placed it has the following code, which this scroll sets to the desired position:

document.querySelectorAll("[id='name']").forEach((e) => {
    e.scrollLeft = -parseInt(getComputedStyle(e).width);
  });

When passing to this component through the route, i.e. by clicking on any button - the scrolls are set as it should.
BUT if I reload the page they go away. And every time the page is reloaded, it happens in this way.

I would not want to constantly redraw the element with the help of some machinations with the state, user effects.
Although if there is such a solution, I will be grateful, because I tried through them - it also did not work.
It is possible that there is another way to set the scroll position. At the css level, for example.
Although I didn't find it.
Maybe I'm wrong at all and this is not related to the rerender.

Answer 1

<div style="overflow-x: scroll; width: 100px;">
  <div style="white-space: nowrap;">asdasfasdgafdgsdhfghssdfkjhalwejghrlakjsbdf.kbasdf!</div>
</div>