javascript - 滚动 "stack"个 DOM 对象

Question

我有这个 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;
}

反射(reflect)了我的网站

现在，这四个部分重叠在一起。我想要的是当我们开始在网站上滚动时，它将滚动浏览一堆部分。当我们滚动时，它将首先滚动#home，因此#home 向上滚动，使#about 可见，当#home 不再在屏幕上时，它将开始向上滚动#about，使#works 可见等等。当您随后在页面上向上滚动时，这些部分应该会再次开始堆叠，恢复向下滚动过程。

如何做到这一点？

Answer 1

这是我找到的解决方案。也许这不是最好的答案，肯定需要改进。

我使用 animate() 来向上/向下移动部分，并使用“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/

希望对您有所帮助。