How scroll a horizontal grid to a specific place on page Load - responsive solution needed

Question

A similar question was asked 8 years ago here: DIV Horizontal scroll, how to onload to ID

and the answer was:

document.getElementById('foo').scrollLeft = 500;

But I have a Bootstrap 4 site that's responsive - so I don't know how wide each card is (in the scrolling div) as it will vary with the device.

Is there now a way that I can move/scroll it to the 'n'th div. on page load?

PS - And like the earlier OP the scrolling div is halfway down the page - so a simple Anchor link isn't appropriate ;(

user_12991471 · Answer

You must first consider the width of the div that is dynamic as a variable and this variable specifies the scroll rate.

 var size=$("div").width()
 document.getElementById('foo').scrollLeft = size;