Javascript - Auto-scroll to an active menu item on page load in horizontal scrolling menu

Question

Try to create a horizontal scrolling menu for mobile devices with CSS and Pure JavaScript. I had created a bellow structure to achieve this and which is looks good. Now, I need to auto-scroll to active nav item on page load using Javascript, It seems if the last item having active class it was hidden. The active class is dynamically set through back-end codes. I have tried with some JavaScript but not working perfectly.

window.onload = function () {
        document.getElementsByClassName('nav-menu')[0].scrollLeft = 0;
        var menus = document.getElementsByClassName('nav-menu__item');
        for (var i = 0; i < menus.length; i++) {
            if (menus[i].classList.contains('active')) {
                document.getElementsByClassName('nav-menu')[0].scrollLeft = menus[i].offsetLeft;
            }
        }
    }

.account-nav{
    padding:0;
    margin: 0 0 30px;
}
.account-nav__container{
    margin:0;
    padding:0;
    border-bottom: 1px solid #757575;
}
.account-nav__container .nav-menu{
    display:flex;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scrollbar-width: none;
}
.account-nav__container .nav-menu::-webkit-scrollbar {
    display: none;
}
.account-nav__container .nav-menu .nav-menu__item{
    display:block;
    margin-right:20px;
    margin-bottom:-1px;
    white-space: nowrap;
}
.account-nav__container .nav-menu .nav-menu__item.active{
    border-bottom: 2px solid black;
}
.account-nav__container .nav-menu .nav-menu__item .nav-menu__item--link{
    display:block;
    padding:15px 0;
    text-decoration:none;
    text-align:left;
}
.account-nav__container .nav-menu .nav-menu__item .nav-menu__item--link:active,
.account-nav__container .nav-menu .nav-menu__item .nav-menu__item--link:hover,
.account-nav__container .nav-menu .nav-menu__item .nav-menu__item--link:focus{
    outline:none;
}
.account-nav__container .nav-menu .nav-menu__item.active .nav-menu__item--link{
    font-weight: 700;
}
.account-nav__container .nav-menu .nav-menu__item.active .nav-menu__item--link::after{
    background:none !important;
}

<div class="account-nav" role="navigation">
    <div class="account-nav__container">
        <ul role="menubar" class="nav-menu">
            <li role="menuitem" class="nav-menu__item">
                <a class="nav-menu__item--link" href="/Customer/Account/EditAccount.html">Personal Information</a>
            </li>
            <li role="menuitem" class="nav-menu__item">
                <a class="nav-menu__item--link" href="/Customer/Account/OrderSummary.html">You Orders</a>
            </li>
            <li role="menuitem" class="nav-menu__item">
                <a class="nav-menu__item--link" href="/Customer/Account/ReturnSummary.html">Returns &amp; Exchanges</a>
            </li>
            <li role="menuitem" class="nav-menu__item active">
                <a class="nav-menu__item--link" href="/Customer/Account/AccountSettings.html">Settings</a>
            </li>
            <li role="menuitem" class="nav-menu__item">
                <a class="nav-menu__item--link" href="/Customer/Account/CommunicationPreferences.html">Preferences</a>
            </li>
            <li role="menuitem" class="nav-menu__item">
                <a class="nav-menu__item--link" href="/Customer/Account/AddressBook.html">Addresses</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

You had it, you just needed a single line of CSS.

From the MDN docs for offsetLeft:

left is an integer representing the offset to the left in pixels from the closest relatively positioned parent element.

You didn't have a relatively positioned parent element. In this case it should be your ul, see the snippet, all I added was the position: relative for the ul.nav-menu, works great.

window.onload = function () {
        document.getElementsByClassName('nav-menu')[0].scrollLeft = 0;
        var menus = document.getElementsByClassName('nav-menu__item');
        for (var i = 0; i < menus.length; i++) {
            if (menus[i].classList.contains('active')) {
                document.getElementsByClassName('nav-menu')[0].scrollLeft = menus[i].offsetLeft;
            }
        }
    }

.account-nav{
    padding:0;
    margin: 0 0 30px;
}
.account-nav__container{
    margin:0;
    padding:0;
    border-bottom: 1px solid #757575;
}
.account-nav__container .nav-menu{
    display:flex;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scrollbar-width: none;
}
.account-nav__container .nav-menu::-webkit-scrollbar {
    display: none;
}
.account-nav__container .nav-menu .nav-menu__item{
    display:block;
    margin-right:20px;
    margin-bottom:-1px;
    white-space: nowrap;
}
ul.nav-menu {
  position: relative
}
.account-nav__container .nav-menu .nav-menu__item.active{
    border-bottom: 2px solid black;
}
.account-nav__container .nav-menu .nav-menu__item .nav-menu__item--link{
    display:block;
    padding:15px 0;
    text-decoration:none;
    text-align:left;
}
.account-nav__container .nav-menu .nav-menu__item .nav-menu__item--link:active,
.account-nav__container .nav-menu .nav-menu__item .nav-menu__item--link:hover,
.account-nav__container .nav-menu .nav-menu__item .nav-menu__item--link:focus{
    outline:none;
}
.account-nav__container .nav-menu .nav-menu__item.active .nav-menu__item--link{
    font-weight: 700;
}
.account-nav__container .nav-menu .nav-menu__item.active .nav-menu__item--link::after{
    background:none !important;
}

<div class="account-nav" role="navigation">
    <div class="account-nav__container">
        <ul role="menubar" class="nav-menu">
            <li role="menuitem" class="nav-menu__item">
                <a class="nav-menu__item--link" href="/Customer/Account/EditAccount.html">Personal Information</a>
            </li>
            <li role="menuitem" class="nav-menu__item">
                <a class="nav-menu__item--link" href="/Customer/Account/OrderSummary.html">You Orders</a>
            </li>
            <li role="menuitem" class="nav-menu__item">
                <a class="nav-menu__item--link" href="/Customer/Account/ReturnSummary.html">Returns &amp; Exchanges</a>
            </li>
            <li role="menuitem" class="nav-menu__item active">
                <a class="nav-menu__item--link" href="/Customer/Account/AccountSettings.html">Settings</a>
            </li>
            <li role="menuitem" class="nav-menu__item">
                <a class="nav-menu__item--link" href="/Customer/Account/CommunicationPreferences.html">Preferences</a>
            </li>
            <li role="menuitem" class="nav-menu__item">
                <a class="nav-menu__item--link" href="/Customer/Account/AddressBook.html">Addresses</a>
            </li>
        </ul>
    </div>
</div>