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 >PAGE 1</div><div >PAGE 2</div><div >PAGE 3</div><div >PAGE 4</div>
PS:
使用
.position().top;,如果你的
.pages为像一个滚动的DIV内
$("#pagesParent")(而不是
$('html,body'))
注意:
对于 移动设备, 您可能希望针对浏览器的标签栏高度调整值(最好还是完全避免这种情况)。你有主意
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)