Javascript滚动侦听器无法在Chrome或Firefox中运行

Rufus 发表于 Dev

鲁弗斯

我创建了一个简单的滑块，可以滚动向下滚动100vh。它在Safari中完美运行，但在Chrome或Firefox中似乎都无法启动。

如果有人可以向我指出我可能出了问题的地方，我将不胜感激。我敢肯定这很简单，但我无法弄清楚。

我已将文件上传到测试Web服务器，因此您可以看到此问题。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>

MTK

我想就是你想要的

我做了一些workarround来强制滚动...也许有点丑陋，但是工作见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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。