滚动 "stack" 个 DOM 个对象
scroll through "stack" of DOM objects
我有这个fiddle:
https://jsfiddle.net/72p0rkqd/
html:
<section id="contact"></section>
<section id="works"></section>
<section id="about"></section>
<section id="home"></section>
css:
section {
display: flex;
position: fixed;
width: 100vw;
min-height: 100vh;
}
#home {
background-color: black;
}
#about {
background-color: red;
}
#works {
background-color: purple;
}
#contact {
background-color: blue;
}
这反映了我的网站
现在,这四个部分重叠在一起。
我想要的是当我们开始在网站上滚动时,它将滚动浏览一堆部分。当我们滚动时,它将首先滚动#home,因此#home 向上滚动,使#about 可见,当#home 不再在屏幕上时,它将开始向上滚动#about,使#works 可见等等。当您随后在页面上向上滚动时,这些部分应该会再次开始堆叠,恢复向下滚动过程。
如何做到这一点?
这是我找到的解决方案。也许这不是最好的答案,肯定需要改进。
我使用 animate() 移动 up/down 部分,使用“DOMMouseScroll”和“mousewheel”从 jQuery.
移动滚轮
我不得不使用一些标志来防止长卷轴。
这是 jQuery :
var homeAnimating = false;
var aboutAnimating = false;
var worksAnimating = false;
var contactAnimating = false;
$('#home').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(homeAnimating) {
return;
}
$('#home').animate({
'marginTop' : "-=100vh" //moves up
});
homeAnimating = true;
aboutAnimating = false;
}
//prevent page from scrolling
return false;
});
$('#about').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(aboutAnimating) {
return;
}
$('#about').animate({
'marginTop' : "-=100vh" //moves up
});
aboutAnimating = true;
worksAnimating = false;
} else {
//scroll up
if(aboutAnimating) {
return;
}
$('#home').animate({
'marginTop' : "+=100vh" //moves down
});
aboutAnimating = true;
homeAnimating = false;
}
//prevent page fom scrolling
return false;
});
$('#works').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(worksAnimating) {
return;
}
$('#works').animate({
'marginTop' : "-=100vh" //moves up
});
worksAnimating = true;
contactAnimating = false;
} else {
//scroll up
if(worksAnimating) {
return;
}
$('#about').animate({
'marginTop' : "+=100vh" //moves down
});
aboutAnimating = false;
worksAnimating = true;
}
//prevent page fom scrolling
return false;
});
$('#contact').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
} else {
//scroll up
if(contactAnimating) {
return;
}
$('#works').animate({
'marginTop' : "+=100vh" //moves down
});
contactAnimating = true;
worksAnimating = false;
}
//prevent page fom scrolling
return false;
});
这里是 fiddle:https://jsfiddle.net/fkahogqd/
希望对您有所帮助。
编辑
好的,这有点棘手,但我想这就是您要找的东西:
这是新的 jQuery :
var winHeight = $(window).height();
$('section').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
var homePos = parseInt($('#home').css('marginTop'),10);
var aboutPos = parseInt($('#about').css('marginTop'),10);
var worksPos = parseInt($('#works').css('marginTop'),10)
//scroll down
$('#home').animate({
'marginTop' : "-=5vh" //moves up
},2);
if (homePos <= - winHeight) {
$('#home').stop();
$('#about').animate({
'marginTop' : "-=5vh"
},2);
}
if (aboutPos <= - winHeight) {
$('#about').stop();
$('#works').animate({
'marginTop' : "-=5vh"
},2);
}
if (worksPos <= - winHeight) {
$('#works').stop();
}
} else {
var homePos = parseInt($('#home').css('marginTop'),10);
var aboutPos = parseInt($('#about').css('marginTop'),10);
var worksPos = parseInt($('#works').css('marginTop'),10)
$('#works').animate({
'marginTop' : "+=5vh" //moves up
},2);
if (worksPos >= 0) {
$('#works').stop();
$('#about').animate({
'marginTop' : "+=5vh"
},2);
}
if (aboutPos >= 0) {
$('#about').stop();
$('#home').animate({
'marginTop' : "+=5vh"
},2);
}
if (homePos >= 0) {
$('#home').stop();
}
}
});
这里是 fiddle:https://jsfiddle.net/fkahogqd/5/
希望对您有所帮助。
我有这个fiddle:
https://jsfiddle.net/72p0rkqd/
html:
<section id="contact"></section>
<section id="works"></section>
<section id="about"></section>
<section id="home"></section>
css:
section {
display: flex;
position: fixed;
width: 100vw;
min-height: 100vh;
}
#home {
background-color: black;
}
#about {
background-color: red;
}
#works {
background-color: purple;
}
#contact {
background-color: blue;
}
这反映了我的网站
现在,这四个部分重叠在一起。 我想要的是当我们开始在网站上滚动时,它将滚动浏览一堆部分。当我们滚动时,它将首先滚动#home,因此#home 向上滚动,使#about 可见,当#home 不再在屏幕上时,它将开始向上滚动#about,使#works 可见等等。当您随后在页面上向上滚动时,这些部分应该会再次开始堆叠,恢复向下滚动过程。
如何做到这一点?
这是我找到的解决方案。也许这不是最好的答案,肯定需要改进。
我使用 animate() 移动 up/down 部分,使用“DOMMouseScroll”和“mousewheel”从 jQuery.
移动滚轮我不得不使用一些标志来防止长卷轴。
这是 jQuery :
var homeAnimating = false;
var aboutAnimating = false;
var worksAnimating = false;
var contactAnimating = false;
$('#home').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(homeAnimating) {
return;
}
$('#home').animate({
'marginTop' : "-=100vh" //moves up
});
homeAnimating = true;
aboutAnimating = false;
}
//prevent page from scrolling
return false;
});
$('#about').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(aboutAnimating) {
return;
}
$('#about').animate({
'marginTop' : "-=100vh" //moves up
});
aboutAnimating = true;
worksAnimating = false;
} else {
//scroll up
if(aboutAnimating) {
return;
}
$('#home').animate({
'marginTop' : "+=100vh" //moves down
});
aboutAnimating = true;
homeAnimating = false;
}
//prevent page fom scrolling
return false;
});
$('#works').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(worksAnimating) {
return;
}
$('#works').animate({
'marginTop' : "-=100vh" //moves up
});
worksAnimating = true;
contactAnimating = false;
} else {
//scroll up
if(worksAnimating) {
return;
}
$('#about').animate({
'marginTop' : "+=100vh" //moves down
});
aboutAnimating = false;
worksAnimating = true;
}
//prevent page fom scrolling
return false;
});
$('#contact').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
} else {
//scroll up
if(contactAnimating) {
return;
}
$('#works').animate({
'marginTop' : "+=100vh" //moves down
});
contactAnimating = true;
worksAnimating = false;
}
//prevent page fom scrolling
return false;
});
这里是 fiddle:https://jsfiddle.net/fkahogqd/
希望对您有所帮助。
编辑
好的,这有点棘手,但我想这就是您要找的东西:
这是新的 jQuery :
var winHeight = $(window).height();
$('section').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
var homePos = parseInt($('#home').css('marginTop'),10);
var aboutPos = parseInt($('#about').css('marginTop'),10);
var worksPos = parseInt($('#works').css('marginTop'),10)
//scroll down
$('#home').animate({
'marginTop' : "-=5vh" //moves up
},2);
if (homePos <= - winHeight) {
$('#home').stop();
$('#about').animate({
'marginTop' : "-=5vh"
},2);
}
if (aboutPos <= - winHeight) {
$('#about').stop();
$('#works').animate({
'marginTop' : "-=5vh"
},2);
}
if (worksPos <= - winHeight) {
$('#works').stop();
}
} else {
var homePos = parseInt($('#home').css('marginTop'),10);
var aboutPos = parseInt($('#about').css('marginTop'),10);
var worksPos = parseInt($('#works').css('marginTop'),10)
$('#works').animate({
'marginTop' : "+=5vh" //moves up
},2);
if (worksPos >= 0) {
$('#works').stop();
$('#about').animate({
'marginTop' : "+=5vh"
},2);
}
if (aboutPos >= 0) {
$('#about').stop();
$('#home').animate({
'marginTop' : "+=5vh"
},2);
}
if (homePos >= 0) {
$('#home').stop();
}
}
});
这里是 fiddle:https://jsfiddle.net/fkahogqd/5/
希望对您有所帮助。