一页滚动网站-但如何禁用滚动直到动画已完成

Question

我已经构建了一个单页应用程序，它有不同的位置固定的部分，在特定数量的滚动之后，在每一个部分中，当它成为当前的时，css3动画出现--但是作为一个要求，我需要禁用滚动直到动画完成--所以当用户点击一个部分时，禁用他们转换到新幻灯片的能力--禁用/锁定滚动直到动画有时间完成--否则一半的元素会褪色，然后点击消失。

--如果我使用类似于一个类附加到主体上的东西--来过低：隐藏，它会被震住

--我是否删除滚动监听器并重新追加它们？我担心这会导致ux中的故障--也许不是scrollTo(0，0)--而是在当前的滑动滚动上修复它，以暂停他们的体验，直到动画完成？

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

在车身上使用css：

.noScroll {  overflow: hidden !important; }

JS：

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

[编辑]以回应旧县的合理关注

下面是要添加的部分代码，以便无论有没有滚动条，页面都保持在相同的位置：

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
  }

演示1：

null

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; }

html lang-html prettyprint-override"><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>