Question

我正在尝试通过boostrap网站实现滚动捕捉，但是当我轻拂滚动条时，它会滚动几页。我希望每次滚动只能滚动1页，这与本网站https://www.bondcap.com中实现的功能类似。我将如何去做？

当前代码（请运行以查看轻拂滚动的问题，该问题最终会滚动几页）：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

        <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

        <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </head>
  <body>

    <style>
    /* All the snapping stuff */
    html {
      position: fixed;
      height: 100%;
      overflow: hidden;
    }


    body {
      width: 100vw;
      height: 100vh;
      font-family: Roboto;
      overflow-y: scroll;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;

    }
    .scroll-container {
        height: 100%;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    section {
        height: 100%;
        scroll-snap-align: center;
    }
    </style>

    <div class="scroll-container">
        <section id="1">
            <div class="container">
              <div class="row">
                <h1>Section 1</h1>
              </div>
            </div>
        </section>

        <section id="2">
            <div class="container">
              <div class="row">
                <h1>Section 2</h1>
              </div>
            </div>
        </section>

        <section id="3">
            <div class="container">
              <div class="row">
                <h1>Section 3</h1>
              </div>
            </div>
        </section>

      <section id="4">
          <div class="container">
            <div class="row">
              <h1>Section 4</h1>
            </div>
          </div>
      </section>
      <script src="js/jquery-2.1.1.js"></script>
      <script src="js/main.js"></script> <!-- Resource jQuery -->
      </div>
    </div>
  </body>
</html>

Answer 1

解决方案01

easyScrollDots({

  // sets to true if you have a fixed navigation
  'fixedNav': false,

  // unique ID of your fixed navigation
  'fixedNavId': '',

  // set to true if your navigation is only sticky when scrolling up
  'fixedNavUpward': false

});

<link href="dist/easyScrollDots.css" rel="stylesheet">
<script src="dist/easyScrollDots.js"></script>



<div>
  <div class="scroll-indicator" id="section01" data-scroll-indicator-title="First Section"></div>
</div>
<div>
  <h1>First Section</h1>
</div>

<div>
  <div class="scroll-indicator" id="section02" data-scroll-indicator-title="Second Section"></div>
</div>
<div>
  <h1>Second Section</h1>
</div>

<div>
  <div class="scroll-indicator" id="section03" data-scroll-indicator-title="Last Section"></div>
</div>
<div>
  <h1>Last Section</h1>
</div>

Working Demo

解决方案02 演示和文档docSlider.js

限制滚动捕捉以滚动一页

1 个答案: