Javascript - Автоматическая прокрутка до активного пункта меню при загрузке страницы в горизонтальном меню прокрутки. - PullRequest
Новая
       0

Javascript - Автоматическая прокрутка до активного пункта меню при загрузке страницы в горизонтальном меню прокрутки.

0 голосов
/ 18 февраля 2020

Попробуйте создать горизонтальное меню прокрутки для мобильных устройств с CSS и Pure JavaScript. Я создал нижнюю структуру, чтобы добиться этого, и это выглядит хорошо. Теперь мне нужно автоматически прокрутить до активного элемента навигации при загрузке страницы, используя Javascript. Кажется, если последний элемент, имеющий активный класс, был скрыт. Активный класс динамически устанавливается с помощью внутренних кодов. Я пытался с некоторыми JavaScript, но не работает идеально. 

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>

1 Ответ

0 голосов
/ 18 февраля 2020

У вас это есть, вам просто нужна была одна строка CSS.

Из MDN документов для offsetLeft:

слева - целое число представление смещения влево в пикселях от ближайшего относительно позиционированного родительского элемента.

У вас не было относительно позиционированного родительского элемента. В данном случае это должен быть ваш ul, посмотрите фрагмент, все, что я добавил, это позиция: относительная для ul.nav-меню, отлично работает. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...