滚动浏览 DOM 对象的“堆栈”

scroll through "stack" of DOM objects

本文关键字：堆栈 对象 浏览 DOM 滚动      更新时间：2023-09-26

我有这个小提琴：

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（） 向上/向下移动部分，并使用"DOMMouseScroll"和"鼠标滚轮"从 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;
});

这是小提琴：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();
        }           
  }
});

这是小提琴：https://jsfiddle.net/fkahogqd/5/

希望对您有所帮助。

相关文章：