Javascript - 在水平滚动菜单中的页面加载时自动滚动到活动菜单项

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>