主页 / 问题 / 1385768
Accepted
Михаил Камахин
Asked:2022-07-26 01:35:54 +0800 CST2022-07-26 01:35:54 +0800 CST

如何运行平滑滚动条？

  • 772

我在这里寻找并尝试启用平滑滚动条。
我似乎根据文档做所有事情，但没有任何效果

const mainNode = document.querySelector('#main');

Scrollbar.init(mainNode);
body {
  margin: 0;
}

section {
  height: 50vh;
}

section:nth-child(2n) {
  background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.7.4/smooth-scrollbar.min.js"></script>

<main class="main" id="main" data-scrollbar>

  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>

</main>

javascript

1 个回答

  1. Best Answer

    有必要限制可滚动块的高度，以便其中的内容“脱落”

    const mainNode = document.querySelector('#main');

Scrollbar.init(mainNode);
    body {
  margin: 0;
}

section {
  height: 50vh;
}

section:nth-child(2n) {
  background-color: black;
}

.main {
  height: 100vh;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.7.4/smooth-scrollbar.min.js"></script>

<main class="main" id="main" data-scrollbar>

  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>

</main>

    • 0

相关问题