Question

我试图滚动每个部分，它正在工作，但它不会滚动到最后一部分，只是在第3部分停止并且在此之后不会向下移动。

我做错了什么？

.antMatchers(HttpMethod.OPTIONS,"/**").permitAll()

Answer 1

问题是偏移测量元素距离身体顶部的距离。但是一旦你滚动了偏移量是不同的，因为元素已经从最后一个滚动更接近/更远。

因此，为了解决此问题，您需要添加scrollTop()元素的.body。

更新了代码

var $pages = $('section'),
  tot = $pages.length,
  c = 0,
  pagePos = 0,
  down = 0,
  listen = true,
  body = $('.body');
body.on('DOMMouseScroll mousewheel', function(e) {
  e.preventDefault();
  if (!listen)
    return;
  listen = false;
  down = e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0;
  c = Math.min(Math.max(0, down ? ++c : --c), tot - 1);
  pagePos = $pages.eq(c).offset().top + body.scrollTop();

  $(this).stop().animate({
    scrollTop: pagePos
  }, 850, function() {
    listen = true;
  });

});

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.bc1,
.bc2,
.bc3,
.bc4 {
  height: 100vh;
}

#red {
  background: red;
}

#blue {
  background: blue;
}

#green {
  background: green;
}

.body {
  height: 100vh;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body" data-spy="scroll" data-target=".navbar-fixed-top">
  <section id="red" class="bc1"></section>
  <section id="blue" class="bc2"></section>
  <section id="green" class="bc3"></section>
  <section id="blue" class="bc4"></section>
</div>

css 100vh滚动在第3节后停止

1 个答案: