我已经构建了一个单页应用程序，它有不同的位置固定的部分，在特定数量的滚动之后，在每一个部分中，当它成为当前的时，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);
在车身上使用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; }<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>