One page scrolling website - but how to disable scrolling until an animation has complete

Question

I have built a one page application, that has different position fixed sections that become hidden/shown - after a particular number of scrolls -- in each section when it becomes current -- css3 animations occur -- but as a requirement I need to disable scrolling until the animations have finished --- so when the user hits a section, disable their ability to transition to a new slide - disable/lock scroll until the animation has had time to complete --- otherwise half the elements fade and then blick out of existence.

-- if I use something like a class appended to the body - to overlow: hidden it would jar

-- do I remove scroll listeners and re-append them again? I am concerned that this will cause a malfunction in the ux -- maybe instead of scrollTo(0,0) -- fix it on the current slide scroll to pause their experience until the animations complete?

function noScroll() {
  window.scrollTo(0, 0);
}

// add listener to disable scroll
window.addEventListener('scroll', noScroll);

// Remove listener to re-enable scroll
window.removeEventListener('scroll', noScroll);

Answer 1

with css on body :

.noScroll {  overflow: hidden !important; }

JS:

document.body.classList.add('noScoll')
document.body.classList.remove('noScoll')

[edit] to respond to the legitimate concerns of The Old County

here is the part of code to add so that the page stays in the same place with or without the scroll bars:

const Remove_ScrollBars =_=>
  {
  let xLeft = document.body.scrollLeft
    , yTop  = document.body.scrollTop

  document.body.classList.add('noScroll')

  document.body.scrollLeft = xLeft
  document.body.scrollTop  = yTop
  }

const Return_ScrollBars =_=>
  {
  let xLeft = document.body.scrollLeft
    , yTop  = document.body.scrollTop

  document.body.classList.remove('noScroll')

  document.body.scrollLeft = xLeft
  document.body.scrollTop  = yTop
  }

Demo 1:

 const Remove_ScrollBars =_=> { let xLeft = document.body.scrollLeft , yTop = document.body.scrollTop document.body.classList.add('noScroll') document.body.scrollLeft = xLeft document.body.scrollTop = yTop } const Return_ScrollBars =_=> { let xLeft = document.body.scrollLeft , yTop = document.body.scrollTop document.body.classList.remove('noScroll') document.body.scrollLeft = xLeft document.body.scrollTop = yTop } noScrollBar.onclick = Remove_ScrollBars ScrollBar.onclick = Return_ScrollBars 

 .noScroll { overflow: hidden !important; } p { white-space: nowrap; } 

 <p>aa</p> <p>bb</p> <p>cc</p> <p>dd</p> <p>cc</p> <p>dd</p> <p>aa</p> <p>bb</p> <p>cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc </p> <p>dd</p> <p>aa</p> <p>aa</p> <p>_ _ _ _ _ _ _ _ _ _ <button id="noScrollBar">Scroll Bar Off </button> </p> <p>_ _ _ _ _ _ _ _ _ _ <button id="ScrollBar"> Scroll Bar On </button> </p> <p>bb</p> <p>cc</p> 

[edit: 2]
OK, as you insist, I looked a little more on the type of answer you are looking for (keep the scroll bars but make them innactive)
So here is a new way to do it, I hope what will be the good?

var WindowPos = { x:window.scrollX, y:window.scrollY, fix : false }

const FixScroll = bool => WindowPos.fix = bool

window.onscroll =_=>{
  if (WindowPos.fix) window.scrollTo(WindowPos.x, WindowPos.y)
  else {
    WindowPos.x = window.scrollX
    WindowPos.y = window.scrollY
  }
}

Demo 2:

 var WindowPos = { x:window.scrollX, y:window.scrollY, fix : false } const FixScroll = bool => WindowPos.fix = bool window.onscroll =_=>{ if (WindowPos.fix) window.scrollTo(WindowPos.x, WindowPos.y) else { WindowPos.x = window.scrollX WindowPos.y = window.scrollY } } fixBars.onclick =_=>{ fixBars.innerText = FixScroll( !WindowPos.fix ) ? 'Set Scroll Bar On' : 'Set Scroll Bar Off' } 

 p { white-space: nowrap; } 

 <p>aa</p> <p>bb</p> <p>cc</p> <p>dd</p> <p>cc</p> <p>dd</p> <p>aa</p> <p>aa</p> <p>dd</p> <p>dd</p> <p>aa</p> <p>aa</p> <p>dd</p> <p>aa</p> <p>bb</p> <p>cc</p> <p>dd</p> <p>cc</p> <p>dd</p> <p>aa</p> <p>bb</p> <p>cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc </p> <p>dd</p> <p>_ _ _ _ _ _ _ _ _ _ <button id="fixBars">Set Scroll Bar Off</button> </p> <p>bb</p> <p>cc</p> <p>dd</p> <p>dd</p> <p>dd</p> <p>aa</p> <p>aa</p> <p>dd</p> <p>aa</p> <p>bb</p> <p>cc</p> <p>dd</p> <p>cc</p> <p>dd</p>