如何制作流畅的滚动条？

Question

我正在使用 bootstrap，这是我的代码。如何使滚动流畅？请帮助我

<div id="navbar-normal" class="navbar navbar-expand-lg">
        <div class="container">
            <a href="" class="navbar-brand">
                <img src="assets/images/logo.svg" alt="">
            </a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
                    <li class="nav-item"><a href="#news" class="nav-link">News</a></li>
                    <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>

<section id="home"><h1>Home</h1></section>
    <section id="about"><h1>About</h1></section>
    <section id="news"><h1>News</h1></section>
    <section id="contact"><h1>Contact</h1></section>

Answer 1

你的意思不是很明显。如果您的意思是希望页面从一个锚点 link 顺利转到下一个锚点，请使用 CSS scroll-behavior. If you want elements on the page to move smoothly as the user scrolls with their finger or mouse wheel, I would suggest Locomotive Scroll 或类似的。但是，您可能正在寻找第一个选项。

CSS scroll-behavior 演示：

:root {
  scroll-behavior: smooth;
}

/* demo */
nav {
  display: block;
  height: 1rem;
  position: fixed;
}
section { 
  height: 100vh; 
  padding-top: 2rem;
}

<nav>
  <a href="#a">Go to A</a>
  <a href="#b">Go to B</a>
  <a href="#c">Go to C</a>
</nav>

<section id="a">Section A</section>
<section id="b">Section B</section>
<section id="c">Section C</section>

Answer 2

您不需要使用javascript来添加平滑滚动，可以通过设置scroll-behavior: smooth; css 属性来完成。示例：

html {
  scroll-behavior: smooth;
}

但是并非所有浏览器都支持此功能请参阅 caniuse.com

通过使用 scroll-js 这样的库，您可以在 safari 等浏览器上滚动。

Answer 3

在CSS中使用这个

:root{
  scroll-behavior: smooth;
}

在JavaScript中使用这个

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e){
                e.preventDefault()

                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                })
            })
        })

Answer 4

您不需要使用javascript来添加平滑滚动

在css中使用这个

:root{
  behavior: smooth;
}

如何制作流畅的滚动条？

how to make smooth scroll?

html

javascript

css