Question

我尝试使用视口将滚动设置为下一个和上一个部分的动画，但出现了问题，到达设定位置需要很长时间，我无法返回上一部分。< / p>

＆＃13;

$(window).scroll(function() {
  var page = $('html, body')
  var delta = 50;
  var vp_top = $(this).scrollTop();
  var vp_bottom = vp_top + $(this).height();

  var sec1_top = $('#sec1').offset().top;
  var sec1_top_delta = sec1_top + delta;
  var sec1_bottom = sec1_top + $('#sec1').height();
  var sec1_bottom_delta = sec1_bottom - delta;

  var sec2_top = $('#sec2').offset().top;
  var sec2_top_delta = sec2_top + delta;
  var sec2_bottom = sec2_top + $('#sec2').height();
  var sec2_bottom_delta = sec2_bottom - delta;

  var sec3_top = $('#sec3').offset().top;
  var sec3_top_delta = sec3_top + delta;
  var sec3_bottom = sec3_top + $('#sec3').height();
  var sec3_bottom_delta = sec3_bottom - delta;

  var last_scroll = 0;

  if (vp_top < sec1_top_delta && vp_bottom > sec1_bottom_delta) {
    $('#sec1').addClass('crr');
  } else {
    $('#sec1').removeClass('crr');
  }

  if (vp_top < sec2_top_delta && vp_bottom > sec2_bottom_delta) {
    $('#sec2').addClass('crr');
  } else {
    $('#sec2').removeClass('crr');
  }

  if (vp_top < sec3_top_delta && vp_bottom > sec3_bottom_delta) {
    $('#sec3').addClass('crr');
  } else {
    $('#sec3').removeClass('crr');
  }

  $(window).scroll(function(event) {
    if (vp_top > last_scroll) {
      $('html, body').animate({
        scrollTop: $('#' + $('.crr').data('next')).offset().top
      }, 500);
    }
    if (vp_top < last_scroll) {
      $('html, body').animate({
        scrollTop: $('#' + $('.crr').data('prev')).offset().top
      }, 500);
    }
    last_scroll = vp_top;
  });

});

＆＃13;

section {
  height: 100%;
  width: 100%;
  position: absolute;
}

section#sec1 {
  top: 0;
  background: blue;
}

section#sec2 {
  top: 100%;
  background: red;
}

section#sec3 {
  top: 200%;
  background: lightseagreen;
}

.crr {
  background: pink !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="sec1" data-prev="" data-next="sec2"></section>
<section id="sec2" data-prev="sec1" data-next="sec3"></section>
<section id="sec3" data-prev="sec2" data-next=""></section>

＆＃13;

Answer 1

我采用了不同的方法来实现动画滚动，请参阅live working fiddle

使用palette = colorRampPalette(brewer.pal(n=9, name='Greens'))(nrow(b)) palette = palette[rank(b)] france2<- map(database="france", fill = TRUE, col=palette)事件代替wheel事件，这来自用户体验视角，如果您通过拖动滚动条滚动或有一个窗口调整大小？最好使用scroll事件并更正所显示的部分，如果已经使用除了方向盘之外的其他方式滚动。
依靠你的window.height而不是你的元素中的wheel或data-prev="sec1" ，从长远来看，这将变得乏味。请使用window.height，并将其与从顶部data-next="sec2"滚动的距离进行比较，您可以了解屏幕上哪个部分以及您应该滚动到下一个部分。
< / LI>
通过这种方式，您可以获得更清晰的HTML代码：
```
$(document).scrollTop()
```
和这个javascript代码：
```
<body>
  <section id="sec1"></section>
  <section id="sec2"></section>
  <section id="sec3"></section>
  <section id="sec4"></section>
  <section id="sec5"></section>
</body>
```

动画到下一页而不是滚动

1 个答案: