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

问题描述

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

解决方案

p>

  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;}  code> 
 
 < script src =https：//ajax.googleapis。 com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< div class =pagestyle =background：＃0bf> PAGE 1< / div> ; div class =pagestyle =background：＃fb0> PAGE 2< / div>< div class =pagestyle =background：＃0fb> PAGE 3< / div>< div class =pagestyle =background：＃b0f>第4页< / div>  
 

PS：

使用 .position（）。top; $ c> .page 在可滚动DIV内，如 $（＃pagesParent）（而不是 $ 'html，body'））

---

注意： br>
移动，您可能需要调整浏览器标签栏高度的值（或者最好，完全防止这种行为）。你有这个想法

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>

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屋！