我正在为我的公文包创建一个OnePage。
每个站点都会填充100%的屏幕。我希望当我使用鼠标滚轮滚动时,那个滚动会100%向下滚动,这样我就可以直接进入下一个网站,而不是页面之间的某个地方。
有人能告诉我如何用JS/jQuery解决这个问题吗?
您也可以使用以下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及其分离的测试页。
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);
}
});
另一个编辑:fiddle只在FF中工作,因为Chrome和IE因为MIME类型错误而拒绝加载脚本。。