我正在构建一个保持原生滚动条的整页滑块，允许用户自由滚动，使用鼠标滚轮或导航点（左侧）切换到幻灯片。
一旦用户在最后一张幻灯片上并尝试进一步向下滚动，整个滑块向上移动以显示一个简单的可滚动部分。如果用户向下滚动然后尝试返回，则此新部分将再次移开并将滑块返回到视图中。
小提琴：http://jsfiddle.net/3odc8zmx/
我正在努力的部分：
注意：如果用户已经自由滚动，当他们使用鼠标滚轮时，我希望滑块能够捕捉到最近的幻灯片以进行自我纠正...有关如何做到这一点的任何建议吗？ / em>的
有人能提供一些帮助吗？
这是JS：
var listen = true;
function nextSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: $('#section1').scrollTop() + $(window).height()
});
}
function prevSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: -$('#section1').scrollTop() + $(window).height()
});
}
function showSlide(index)
{
var offset = $('#section1 div').eq(index).offset();
offset = offset.top;
if(offset){
listen = false;
$('.slide-dot').removeClass('active');
$('.slide-dot').eq(index).addClass('active');
$('#section1').stop(true,false).animate({
scrollTop: offset
}, 500, function(){
listen = true;
});
} else {
alert('error');
}
}
$(document).ready(function(){
var fullHeight = 0;
$('#section1 div').each(function(){
fullHeight = fullHeight + $(this).height();
});
var lastScrollTop1 = 0;
$('#section1').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
if( $('#section1').scrollTop() + $(window).height() == fullHeight) {
if(listen){
$('body').addClass('shifted');
}
}
}
lastScrollTop1 = st;
});
$('#section1').on('mousewheel', function(e){
e.preventDefault();
var st = $(this).scrollTop();
if (st > lastScrollTop1){
nextSlide();
} else {
prevSlide();
}
});
var lastScrollTop2 = 0;
$('#section2').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
} else {
if( st == 0 ){
$('body').removeClass('shifted');
}
}
lastScrollTop1 = st;
});
$('.slide-dots').css({'margin-top':-$('.slide-dots').height() / 2});
$('.slide-dot').first().addClass('active');
$(document).on('click', '.slide-dot', function(e){
e.preventDefault();
showSlide( $(this).index() );
});
$(document).on('click', '.slide-dot-fake', function(e){
e.preventDefault();
$('body').addClass('shifted');
});
});
对于那些想知道为什么我没有使用类似fullPage.js的人，这是因为它无法处理我想要在两个区域之间转换的方式并且有两个滚动条（每个区域一个）。
答案 0 :(得分：4)
您可以使用：
e.originalEvent.wheelDelta
而不是：
st > lastScrollTop1
在mousewheel事件中针对您的第三个问题检查用户是否向上或向下滚动。并且还更改prevSlide中的+/-。我使用dm4web的小提琴来解决你的第一个问题。我用过：
scrollTop: offset - 1
而不是：
scrollTop: offset
对于你的第二个问题，因为当滚动到达第三个元素的最后一个像素时，它会自动转到下一个区域，因此1个像素就足够了。
答案 1 :(得分：1)
正如@chdltest所建议的那样，你可以使用fullPage.js来实现。
此处an example。转到最后一节。
用于示例的代码：
<强>的Javascript
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
scrollOverflow: true,
scrollBar: true,
afterLoad: function (anchor, index) {
//hiding the main scroll bar
if (index == 4) {
$('body, html').css('overflow', 'hidden');
}
//showing the main scroll bar
if (index == 3) {
$('body, html').css('overflow', 'visible');
}
}
});
CSS （如果您更喜欢使用普通样式）
/* Normal style scroll bar
* --------------------------------------- */
.slimScrollBar {
display: none !important;
}
.fp-scrollable {
overflow: auto !important;
}
使用fullPage.js代替您自己的代码的优点：