Scroll to bottom of HTML page only after dom finishes repainting

I have a function that I want to add a border to the bottom of the page, and then I want to scroll all the way down on the page.

here is my html for it

<div id="bottom-border></div>

Then with JavaScript I am essentially doing this to it

<div id="bottom-border" style="margin-bottom: 10rem;"></div>

after I added the border, then I want to scroll all the way down to then end of the page. Here is how I am doing all of this from JavaScript

        let bottomBorder = document.getElementById('bottom-border');
        bottomBorder.style.marginBottom = '10rem';
        window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'});

The problem is that it only scrolls down half way because the browser tries to scroll to the bottom while the browser is adding the margin-bottom, so the page only scrolls down half way.

I can do something like this, but I think this is a crummy way of doing it

        let bottomBorder = document.getElementById('bottom-border');
        bottomBorder.style.marginBottom = '10rem';

        let mobileKeyboardStyleSheet = document.getElementById('mobileKeyboardCSS')
        mobileKeyboardStyleSheet.disabled = false;

        setTimeout(() => {
            window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'});
        }, 1000);

That essentially waits a second before the browser finishes repainting it before trying to scroll down. However, this version gives a bad animation to the end user and it is not always reliable because some browsers take 0.5 seconds to paint and some browsers take 5 seconds to repaint.

I think it would be best if I could tell the browser to:

“do this code, and after it is finished being painted, then do this part of the code”

but I am unsure of how to do that.

Please let me know, thank you!