Автоматическая прокрутка до активного горизонтального элемента, когда он не отображается, внутри контейнера, после загрузки страницы

Question

Я создал JSfiddle для элемента навигации с горизонтальной прокруткой: https://jsfiddle.net/sstracy/goe8j3sv/

Визуально он загружается на страницу так, как я хочу, за исключением случаев, когда создание активного элемента навигации слишком далеко отслева меньшие экраны будут скрывать активную ссылку.Как только страница загрузится, я бы хотел, чтобы горизонтальная навигация прокручивалась вправо, пока активный элемент не будет виден.В противном случае функциональность работает так, как я хочу.

На этом этапе тестирования все ссылки в навигационной системе никуда не уходят, но в окончательной версии они будут перенаправлять пользователей на разные страницы, все страницы стот же базовый навигационный код.Единственное отличие будет состоять в том, что на каждой странице будет свой класс тега body, который будет соответствовать идентификатору, указанному в каждой навигационной ссылке.

Я знаю, что код не самый чистый, так как я начал работать со смесьюJS и jQuery здесь ... так что решение с использованием любого из них в порядке.

Я запустил некоторый код, чтобы, надеюсь, заставить навигацию прокручиваться, но она не работает:

JS Lines 146158:

// Scroll if selected item is not in view when the page loads but not after or during user interaction.
            var ids, matches = document.body.className.match(/(^|\s)hpn-(\d+)(\s|$)/);
            if (matches) {
                // found the id
                ids = matches[0];

                var $elem = ids;

                var navPosition = $('#pnProductNav').scrollLeft(),
                    elemPosition = document.getElementById(ids).offset().left;

                $("#pnProductNav").animate({scrollLeft: navPosition + elemPosition}, 800);
            }

• Во-первых, я нахожу класс из тела, которое начинается с "hpn -".
• Если есть класс тела, который соответствует, япоместите его в переменную "ids", а затем "$ elem".
• Затем я пытаюсь найти расстояние, на которое элемент ссылки находится слева, чтобы я мог анимировать прокрутку вправо. Здесь я считаю, что у меня не хватает, потому что панель навигации не прокручивается при загрузке страницы, в то время как ссылка "Стойки" или "hpn-19" является активной ссылкой.

Любая помощь будет принята с благодарностью, и я с удовольствием отвечу на любые вопросы, чтобы прояснить ситуацию, прежде чем будет оказана помощь!

Answer 1

Полагаю, я просто слишком обдумал этот. Я наконец получил это:

    // Scroll if selected item is not in view when the page loads but not after or during. 
    // First, find and get body class name that starts with hpn-
    var ids, matches = document.body.className.match(/(^|\s)hpn-(\d+)(\s|$)/);
    if (matches) {

        // found the id so define it
        ids = matches[0];

        // Get position of the nav bar and the position of the link with the matching ID
        var navPosition = $('#pnProductNav').scrollLeft(),
            elemPosition = $('#' + ids).offset().left;

        // Add the two together to get your scroll distance and animate    
        $("#pnProductNav").animate({scrollLeft: navPosition + elemPosition}, 800);
    }

https://jsfiddle.net/sstracy/goe8j3sv/12/