user1464175 user1464175 - 1 year ago 60
CSS Question

Control page scroll animation with mousewheel

can anybody help me understand how Honda achieved this effect:

I mean the ease when you scroll.

Answer Source

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

$('html, body').on('DOMMouseScroll mousewheel', function(e) {
  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;
<script src=""></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>

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

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