Javascript scroll listener not working in chrome or firefox

I have created a simple slider that on scroll scrolls down 100vh. It works perfectly in Safari but it doesn't seem to fire at all in both Chrome or Firefox.

Really appreciate it if anyone could point out to me where i may have gone wrong. I'm sure it's something simple but I just can't figure it out.

I have uploaded the files to my test web server so you can see the issue. 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>

728x90

2 Answers Javascript scroll listener not working in chrome or firefox

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

6 days ago

I think is that what you want

I have made a little workarround to force scroll ... maybe a little bit ugly but work see fakeScroll() function bellow.

That force the scrollbar to does not reach the beggining and the end. Because in your example above if the scroll bar reach the end ... scroll event can't be triggered (same if reach the begining).

I have also changed the conditions and the timming from setTimeout (ready = true) to 500. You can change it as you want

Sory for my English.

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>

6 days ago