如何使用鼠标滚轮一次向下滚动100％？ – jquery

我正在为我的投资组合创建一个OnePage。

每个站点填充100％的屏幕。 我希望当我使用鼠标滚轮滚动时，一个滚动，向下滚动100％，这样我就可以直接进入下一个站点而不是页面之间的某个位置。

有人能告诉我如何用JS / jQuery解决这个问题吗？

Answer 1

您还可以使用以下onscroll处理程序，它基于以下答案 ：

 $(document).ready(function () { var divs = $('.mydiv'); var dir = 'up'; // wheel scroll direction var div = 0; // current div $(document.body).on('DOMMouseScroll mousewheel', function (e) { if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { dir = 'down'; } else { dir = 'up'; } // find currently visible div : div = -1; divs.each(function(i){ if (div<0 && ($(this).offset().top >= $(window).scrollTop())) { div = i; } }); if (dir == 'up' && div > 0) { div--; } if (dir == 'down' && div < divs.length) { div++; } $('html,body').stop().animate({ scrollTop: divs.eq(div).offset().top }, 200); return false; }); $(window).resize(function () { $('html,body').scrollTop(divs.eq(div).offset().top); }); }); 

这是jsfiddle及其分离的测试页面 。

Answer 2

MouseWheel不是jQuery中的默认事件，所以首先你需要这样的东西，并编写你自己的函数来切换到下一页或使用另一个插件，如scrollTo

不太确定这是否是最好的做法，但..

编辑

这是斯塔诺小提琴的基础上的小提琴。

 $("body").mousewheel(function(event, delta, deltaX, deltaY) { event.preventDefault(); if (delta > 0 && current_page > 0) { current_page = current_page - 1; $("body").scrollTo( '#page_'+current_page); } else if (delta < 0 && current_page < 10) { current_page = current_page + 1; $("body").scrollTo( '#page_'+current_page); } }); 

另一个编辑：小提琴仅适用于FF，Chrome和IE拒绝加载脚本，因为MIME类型错误。