scrollIntoView () приводит к исчезновению панели навигации до обновления страницы - PullRequest
Новая
       8

scrollIntoView () приводит к исчезновению панели навигации до обновления страницы

0 голосов
/ 22 декабря 2019

Когда я использую scrollIntoView ({поведение: "сглаживать"}), страница прокручивается до нужного элемента. Но тогда моя навигационная панель исчезает, даже когда прокручивается обратно наверх. Появляется только когда я обновляю страницу. Основная часть моего кода: 

<nav class="navbar navbar-light" style="background-color: #8E44AD;">
    <a class="navbar-brand" href="#">Find Projects</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" data-_extension-text-contrast="">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="[other site]" target="_blank">Main Site</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="[github]" target="_blank">Github <img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github_icon" class="github-icon-navigate" width="15" height="15"></a>
            </li>
        </ul>
        <form class="form-inline">
            <input class="form-control mr-sm-2" id="search-input" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-dark my-2 my-sm-0" type="button" onclick="cleanAndCheckInput()" data-_extension-text-contrast="">Search (Beta)</button>
        </form>
        <script>
           // function doSearch() {
            //    document.getElementById(document.getElementById('search-input').value).scrollIntoView({behavior: "smooth"});
           // }
            function cleanAndCheckInput() {
                var userInput = document.getElementById('search-input').value.toLocaleLowerCase().replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/ ]/gi, "");
                var everyChild = document.getElementById('parent-project').childNodes
                for (var i =0; i<everyChild.length; i++) {
                    if (typeof(everyChild[i].id) !== 'undefined') {
                        if (userInput == everyChild[i].id.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/ ]/gi, "").toLocaleLowerCase()) {
                            document.getElementById(everyChild[i].id).scrollIntoView({behavior: "smooth"});
                        }
                        else if (i == everyChild.length-2 && userInput != everyChild[i].id.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/ ]/gi, "").toLocaleLowerCase()) {
                            document.getElementById("Future-Projects").scrollIntoView({behavior: "smooth"});
                        }
                    }
                }

            }
        </script>
    </div>
</nav>

Я подозреваю, что это scrollIntoView () вызывает проблему, потому что анимация перемещения к нужному элементу, который приводит к исчезновению панели навигации.

...