jquery全页滚动无插件 [英] jquery full page scroll without plugin
本文介绍了jquery全页滚动无插件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
https://jsfiddle.net/dewit/xnq0pzx0/1/
var currentLocation ='firstPage';
$ b $（document）.scroll（function（e）{
var scrolled = $（window）.scrollTop（），
secondHeight = $（'＃secondPage'）。 offset（）。top，
thirdHeight = $（'＃thirdPage'）。offset（）。top;
if（滚动> 1&&& currentLocation =='firstPage' ）{
currentLocation ='secondPage';
$（'body'）。animate（{scrollTop：$（'＃secondPage'）。offset（）。top}，500）;
} else if（scrolled> secondHeight + 1&& currentLocation =='secondPage'）{
currentLocation ='thirdPage';
$（'body'）。animate（{scrollTop：$（ '#thirdPage'）。offset（）。top}，500）;
} else if（滚动< thirdHeight - 1&&& currentLocation =='thirdPage'）{
currentLocation ='secondPage '
$（'body'）。animate（{scrollTop：$（'＃secondPage'）。offset（）。top}，500）;
} else if（scrolled< secondHeight - 1& amp; ;& currentLocation =='secondPage '）{
currentLocation ='firstPage';
$（'body'）。animate（{scrollTop：$（'＃firstPage'）。offset（）。top}，500）;
}）
我想制作一个没有插件的完整页面滑块。
我希望这可以检测当前页面和滚动方向，并移动下一页或上一页。
问题是，当幻灯片正在改变，它检测到新的位置和滚动。
结果，它反弹上下。
$ b $因此，我想在幻灯片移动时冻结此功能。
但是，我不知道如何处理这个。
$ b解决方案
问题是，当用户滚动并且还有动画时，事件监听器被触发。从我所看到的，你只想在用户滚动时检查所有if / else语句。类似下面的内容应该有所帮助：
-code>
var currentLocation ='firstPage'; //不需要在事件侦听器中设置它们，因为它们总是（）＃firstPage'）。offset（）。top，secondHeight = $（'＃secondPage'）。offset（）。top，thirdHeight = $（'＃thirdPage'）。offset（）。我们可以检查滚动是由用户还是由animation.var autoScrolling = false触发; $（document）.scroll（function（e）{var scroll = $（window）.scrollTop（）; / /只检查用户是否滚动if（！autoScrolling）{if（滚动> 1&&; currentLocation =='firstPage'）{scrollPage（secondHeight，'secondPage'）;} else if（scrolled> secondHeight + 1 &&& currentLocation =='secondPage'）{scrollPage（thirdHeight，'thirdPage'）; } else if（滚动< thirdHeight - 1&& currentLocation =='thirdPage'）{scrollPage（secondHeight，'secondPage'）; } else if（滚动< secondHeight - 1&&& currentLocation =='secondPage'）{scrollPage（firstHeight，'firstPage'）; }} //因为它们都具有相同的动画，所以可以避免重复函数scrollPage（nextHeight，page）{currentLocation = page; //此时，页面将开始通过动画滚动//因此，我们切换此var，以便侦听器不会触发所有if / else autoScrolling = true; $（'body，html'）。animate（{scrollTop：nextHeight}，500，function（）{//一旦动画结束，我们可以重置帮助器//现在回到检测用户滚动autoScrolling =假;}）; } $（ H1’ ）HTML（滚动）; $（'h1'）。append（/+ secondHeight）; $（'h1'）。append（/+ thirdHeight）;}）
* {padding：0; margin：0;} html，body {width：100％; height：100％;}。page {width：100％;行高：100vh; text-align：center;} header {position：fixed;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< header> < H1>< / H1>< /报头><物品> < div class =pageid =firstPage> < h2>第一页< / h2> < / DIV> < div class =pageid =secondPage> < h2>第二页< / h2> < / DIV> < div class =pageid =thirdPage> < h2>第三页< / h2> < / div>< / article>
https://jsfiddle.net/dewit/xnq0pzx0/1/
var currentLocation = 'firstPage';
$(document).scroll(function(e){
var scrolled = $(window).scrollTop(),
secondHeight = $('#secondPage').offset().top,
thirdHeight = $('#thirdPage').offset().top;
if (scrolled > 1 && currentLocation == 'firstPage') {
currentLocation = 'secondPage';
$('body').animate({scrollTop:$('#secondPage').offset().top}, 500);
} else if (scrolled > secondHeight + 1 && currentLocation == 'secondPage') {
currentLocation = 'thirdPage';
$('body').animate({scrollTop:$('#thirdPage').offset().top}, 500);
} else if (scrolled < thirdHeight - 1 && currentLocation == 'thirdPage') {
currentLocation = 'secondPage'
$('body').animate({scrollTop:$('#secondPage').offset().top}, 500);
} else if (scrolled < secondHeight - 1 && currentLocation == 'secondPage') {
currentLocation = 'firstPage';
$('body').animate({scrollTop:$('#firstPage').offset().top}, 500);
}
})
I want to make a full page slider without plugin.
I expect this to detect current page and scroll direction and move next or previous page.
The problem is that while slide is changing, it detects new location and scroll.
As a result, it bounces up and down.
So, I want to freeze this function while slide moving.
But, I don't know how to treat this.
解决方案
The problem is that the event listener is triggered when the user scrolls and also by your animation. From what I see, you want to check all the if/else statements only when user scrolls. Something like the following should help:
var currentLocation = 'firstPage';
// No need to set these inside the event listener since they are always the same.
var firstHeight = $('#firstPage').offset().top,
secondHeight = $('#secondPage').offset().top,
thirdHeight = $('#thirdPage').offset().top;
// Helper so we can check if the scroll is triggered by user or by animation.
var autoScrolling = false;
$(document).scroll(function(e){
var scrolled = $(window).scrollTop();
// Only check if the user scrolled
if (!autoScrolling) {
if (scrolled > 1 && currentLocation == 'firstPage') {
scrollPage(secondHeight, 'secondPage');
} else if (scrolled > secondHeight + 1 && currentLocation == 'secondPage') {
scrollPage(thirdHeight, 'thirdPage');
} else if (scrolled < thirdHeight - 1 && currentLocation == 'thirdPage') {
scrollPage(secondHeight, 'secondPage');
} else if (scrolled < secondHeight - 1 && currentLocation == 'secondPage') {
scrollPage(firstHeight, 'firstPage');
}
}
// Since they all have the same animation, you can avoid repetition
function scrollPage(nextHeight, page) {
currentLocation = page;
// At this point, the page will start scrolling by the animation
// So we switch this var so the listener does not trigger all the if/else
autoScrolling = true;
$('body,html').animate({scrollTop:nextHeight}, 500, function () {
// Once the animation is over, we can reset the helper.
// Now it is back to detecting user scroll.
autoScrolling = false;
});
}
$('h1').html(scrolled);
$('h1').append("/" + secondHeight);
$('h1').append("/" + thirdHeight);
})
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height:100%;
}
.page{
width: 100%;
line-height: 100vh;
text-align: center;
}
header{
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h1></h1>
</header>
<article>
<div class="page" id="firstPage">
<h2>first page</h2>
</div>
<div class="page" id="secondPage">
<h2>second page</h2>
</div>
<div class="page" id="thirdPage">
<h2>third page</h2>
</div>
</article>
这篇关于jquery全页滚动无插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
