HTML如何让鼠标滑轮到下一页,html - 如何使用鼠标滚轮跳转到html中的下一个或上一个＃部分 - 堆栈内存溢出...

没有插件，我们需要做的就是使用mousewheel事件捕获鼠标mousewheel - 在Firefox上我们使用DOMMouseScroll - 而且取决于事件的originalEvent.wheelDelta的值 - 再次在Firefox中它是originalEvent.detail ，感谢Firefox - 如果这样值为正，则用户向上滚动，如果为负，则方向为向下。

jQuery ( 1 ) ：

//initialize

var winHeight = $(window).height(),

pages = $('.page'),

navLinks = $('#menu-nav a'),

currentPage = 0;

$('html, body').animate({ scrollTop: 0}, 0);

// listen to the mousewheel scroll

$(window).on('mousewheel DOMMouseScroll', function(e){

//by default set the direction to DOWN

var direction = 'down',

$th = $(this),

// depending on the currentPage value we determine the page offset

currentPageOffset = currentPage * winHeight;

// if the value of these properties of the even is positive then the direction is UP

if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {

direction = 'up';

}

// if the direction is DOWN and the currentPage increasing won't exceed

// the number of PAGES divs, then we scroll downward and increase the value

// of currentPage for further calculations.

if(direction == 'down' && currentPage <= pages.length - 2){

$th.scrollTop(currentPageOffset + winHeight);

currentPage++;

} else if(direction == 'up' && currentPage >= 0) {

// else scroll up and decrease the value of currentPage IF the direction

// is UP and we're not on the very first slide

$th.scrollTop(currentPageOffset - winHeight);

currentPage--;

}

});

// as final step we need to update the value of currenPage upon the clicking of the

// navbar links to insure having correct value of currentPage

navLinks.each(function(index){

$(this).on('click', function(){

navLinks.parent().removeClass('current');

$(this).parent().addClass('current');

currentPage = index;

});

});

( 1 ) 更新

如果你不想使用jQuery，下面是与上面相同的纯 javascript代码，这在IE8及以下版本中不起作用：

纯Javascript：

//initialize

var winHeight = window.innerHeight,

pages = document.getElementsByClassName('page'),

navLinks = document.querySelectorAll('#menu-nav a'),

currentPage = 0;

window.addEventListener('mousewheel', function(e) {

scrollPages(e.wheelDelta);

});

window.addEventListener('DOMMouseScroll', function(e) {

scrollPages(-1 * e.detail);

});

function scrollPages(delta) {

var direction = (delta > 0) ? 'up' : 'down',

currentPageOffset = currentPage * winHeight;

if (direction == 'down' && currentPage <= pages.length - 2) {

window.scrollTo(0, currentPageOffset + winHeight);

currentPage++;

} else if (direction == 'up' && currentPage > 0) {

window.scrollTo(0, currentPageOffset - winHeight);

currentPage--;

}

}

for (var i = 0; i < navLinks.length; i++) {

navLinks[i].addEventListener('click', updateNav(i));

}

function updateNav(i) {

return function() {

for (var j = 0; j < navLinks.length; j++) {

navLinks[j].parentNode.classList.remove('current');

}

navLinks[i].parentNode.classList.add('current');

currentPage = i;

}

}