scrollIntoView() 导致导航栏消失，直到页面刷新

Question

当我使用scrollIntoView({behavior: "smooth"})时，页面滚动到所需的元素。但随后我的导航栏消失了，即使滚动回顶部也是如此。它仅在我刷新页面时出现。 我的代码的主要部分：

<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()导致了这个问题，因为移动到所需元素的动画导致导航栏消失。

Answer 1

使用以下内容：

element.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'start' })

-jfrohn