Javascript 滚动监听器在 chrome 或 firefox 中不起作用

Question

我创建了一个简单的 slider ，它在滚动时向下滚动 100vh。它在 Safari 中完美运行，但在 Chrome 或 Firefox 中似乎根本无法触发。

如果有人能指出我可能出错的地方，我将不胜感激。我敢肯定这很简单，但我就是想不通。

我已将文件上传到我的测试网络服务器，以便您查看问题。 test.liamcrane.co.uk

var slider = document.querySelector('.section__wrapper__inner');
var sections = document.querySelectorAll('.section');
var currentTransform = 0;
var activeSection = 0;

function slideDown() {
  if (!(activeSection === sections.length - 1)) {
    sectionReset();
    currentTransform -= 100;
    slider.style.transform = "translate3d(0," + currentTransform + "vh, 0)";
    activeSection++;
    sections[activeSection].classList.add('active');
  }
  setTimeout(function() {
    ready = true;
  }, 2000);
}

function slideUp() {
  if (!(activeSection === 0)) {
    sectionReset();
    currentTransform += 100;
    slider.style.transform = "translate3d(0," + currentTransform + "vh, 0)";
    activeSection--;
    sections[activeSection].classList.add('active');
  }
  setTimeout(function() {
    ready = true;
  }, 2000);
}

function sectionReset() {
  sections[activeSection].classList.remove('active');
}

var ready = true;
document.addEventListener('scroll', function() {
  if (ready && window.pageYOffset > 0) {
    ready = false;
    slideDown();
  } else if (ready && window.pageYOffset <= 0) {
    ready = false;
    slideUp();
  }
});

.section__wrapper {
  height: 100vh;
  overflow: hidden;
}

.section__wrapper__inner {
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 1s;
}

.section {
  position: relative;
  height: 100vh;
  color: black;
  text-align: center;
}

.section span {
  line-height: 100vh;
  display:block;
}

<div class="section__wrapper">
  <div class="section__wrapper__inner">
    <section class="section"><span>1</span></section>
    <section class="section"><span>2</span></section>
    <section class="section"><span>3</span></section>
    <section class="section"><span>4</span></section>
    <section class="section"><span>5</span></section>
  </div>
</div>

Answer 1

我想这就是你想要的

我做了一些工作来强制滚动……可能有点难看，但工作请参见下面的 fakeScroll() 函数。

强制滚动条不到达开始和结束。因为在您上面的示例中，如果滚动条到达末尾...... scroll 事件无法触发(如果到达开头则相同)。

我还将条件和时间从 setTimeout (ready = true) 更改为 500。您可以根据需要更改它

对不起我的英语。

var slider = document.querySelector('.section__wrapper__inner');

var sections = document.querySelectorAll('.section');
var currentTransform = 0;
var activeSection = 0;

var lastOffset = window.pageYOffset;
var actualOffset = lastOffset;

function fakeScroll(){
  if(lastOffset > 1){
    window.scrollTo(0,lastOffset - 1);
  }else{
    window.scrollTo(0,1);
  } 	
}

function slideDown() {
  if (!(activeSection === sections.length - 1)) {
    sectionReset();
    currentTransform -= 100;
    slider.style.transform = "translate3d(0," + currentTransform + "vh, 0)";
    activeSection++;
     sections[activeSection].classList.add('active');
  }
  fakeScroll();
  setTimeout(function() {
    ready = true;
  }, 500);
}

function slideUp() {
  if (!(activeSection === 0)) {
    sectionReset();
    currentTransform += 100;    
    slider.style.transform = "translate3d(0," + currentTransform + "vh, 0)";
    activeSection--;
    sections[activeSection].classList.add('active');
  }
  fakeScroll();
  setTimeout(function() {
    ready = true;    
  }, 500);
}

function sectionReset() {
  sections[activeSection].classList.remove('active');
}

var ready = true;

window.addEventListener('scroll', function() {
	
  actualOffset = window.pageYOffset;

  if (actualOffset > lastOffset) {
    if(ready){
      ready = false;
      slideDown();
    }else{
      fakeScroll();   
    }
  } else if (window.pageYOffset <= lastOffset) {
    if(ready){
      ready = false;
      slideUp();
     }else{
       fakeScroll();    
     }
  }
  lastOffset = window.pageYOffset;
});

.section__wrapper {
  height: 100vh;
  position:relative;
  overflow: hidden;
}

.section__wrapper__inner {
  height: 100%;
  position:relative;
  transform: translate3d(0, 0, 0);
  transition: transform 1s;
}

.section {
  position: relative;
  height: 100vh;
  color: black;
  text-align: center;
}

.section span {
  line-height: 100vh;
  display:block;
}

<div class="section__wrapper">
  <div class="section__wrapper__inner">
    <section class="section"><span>1</span></section>
    <section class="section"><span>2</span></section>
    <section class="section"><span>3</span></section>
    <section class="section"><span>4</span></section>
    <section class="section"><span>5</span></section>
  </div>
</div>