使用鼠标滚轮控制页面滚动动画

Question

任何人都可以帮我理解本田如何实现这个效果:http: //testdays.hondamoto.ch/

我的意思是滚动时的轻松.

Answer 1

var $pages = $(".page"),
    tot = $pages.length,
    c = 0, pagePos = 0, down = 0, listen = true;

$('html, 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;  
  
  $(this).stop().animate({scrollTop: pagePos}, 650, function(){
    listen = true;
  });
  
});

*{margin:0;}
.page{min-height:100vh;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page" style="background:#0bf">PAGE 1</div>
<div class="page" style="background:#fb0">PAGE 2</div>
<div class="page" style="background:#0fb">PAGE 3</div>
<div class="page" style="background:#b0f">PAGE 4</div>

PS:如果你的s在一个可滚动的DIV里面,
请使用(而不是).position().top;.page$("#pagesParent")$('html, body')

注意:
对于移动设备,您可能需要调整浏览器标签栏高度的值会计(或者最好,根本不要阻止该行为).你明白了