整页滚动
Fullpage scrolling
我需要实现平滑的整页滚动。我已经在这个页面上做了:
http://superhostitel.cz/sluzby
但是当我用滚轮滚动更多的时候,它会滚动更多的页面。请问如何设置只滚动一页?
我的代码:
$(document).ready(function () {
var divs = $('.service');
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++;
}
//console.log(div, dir, divs.length);
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 800);
return false;
});
$(window).resize(function () {
$('html,body').scrollTop(divs.eq(div).offset().top);
});
});
使用守卫来防止您的处理程序一次多次 运行,在开始执行函数时升起标志,在动画结束时重置它。
按照这些思路应该可行(没有测试,但你应该明白了):
var running = false;
var handler = function (e) {
if (running) {
return;
}
running = true;
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++;
}
//console.log(div, dir, divs.length);
$('html,body').stop().animate(
{ scrollTop: divs.eq(div).offset().top }, // properties
800, // duration
"swing", // easing (needed to use 4th argument)
function(){ running = false; } // animation complete callback
);
return false;
};
$(document.body).on('DOMMouseScroll mousewheel', handler );
你可以换一种方式:
- 定义最大页数 (fe) 10 页。
- 您可以选择实际页面,从 1 开始(不是 0 以便于编码)
- 禁用正常滚动。
- 当调用 scroll 并且目标不扩展最大页数和减少最小页数时(不进入 #0 页)- scroll
- 动态检测 window 大小调整。
祝你有愉快的一天。
如果你想在特定元素上滚动 - 我推荐你 this
注意:将 setInterval(f, 1000/60) 用于将用户带到 clientHeight 与实际页面相乘的动画。
我需要实现平滑的整页滚动。我已经在这个页面上做了:
http://superhostitel.cz/sluzby
但是当我用滚轮滚动更多的时候,它会滚动更多的页面。请问如何设置只滚动一页?
我的代码:
$(document).ready(function () {
var divs = $('.service');
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++;
}
//console.log(div, dir, divs.length);
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 800);
return false;
});
$(window).resize(function () {
$('html,body').scrollTop(divs.eq(div).offset().top);
});
});
使用守卫来防止您的处理程序一次多次 运行,在开始执行函数时升起标志,在动画结束时重置它。
按照这些思路应该可行(没有测试,但你应该明白了):
var running = false;
var handler = function (e) {
if (running) {
return;
}
running = true;
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++;
}
//console.log(div, dir, divs.length);
$('html,body').stop().animate(
{ scrollTop: divs.eq(div).offset().top }, // properties
800, // duration
"swing", // easing (needed to use 4th argument)
function(){ running = false; } // animation complete callback
);
return false;
};
$(document.body).on('DOMMouseScroll mousewheel', handler );
你可以换一种方式:
- 定义最大页数 (fe) 10 页。
- 您可以选择实际页面,从 1 开始(不是 0 以便于编码)
- 禁用正常滚动。
- 当调用 scroll 并且目标不扩展最大页数和减少最小页数时(不进入 #0 页)- scroll
- 动态检测 window 大小调整。
祝你有愉快的一天。
如果你想在特定元素上滚动 - 我推荐你 this
注意:将 setInterval(f, 1000/60) 用于将用户带到 clientHeight 与实际页面相乘的动画。