使用鼠标滚轮控制页面滚动动画 [英] Control page scroll animation with mousewheel

问题描述

谁能帮我理解本田是如何实现这种效果的:http://testdays.hondamoto.ch/

can anybody help me understand how Honda achieved this effect: http://testdays.hondamoto.ch/

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

I mean the ease when you scroll.

推荐答案

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>

附注:
使用 .position().top; 如果您的 .page 位于可滚动的 DIV 中，例如 $("#pagesParent")(而不是$('html, body'))

P.S:
Use .position().top; if your .pages are inside a scrollable DIV like $("#pagesParent") (instead of $('html, body'))

注意:
对于移动，您可能需要调整浏览器标签栏高度的值(或者最好完全阻止这种行为).你有想法

Notice:
for mobile you might want to adjust the value accounting for the browser's tabs bar height (or best, prevent that behaviour at all). You got the idea

这篇关于使用鼠标滚轮控制页面滚动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！