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')

[edit]回应The Old County

的合理关注

这是要添加的代码部分，以便无论滚动条与否，页面都位于同一位置：

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：

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]
好的，正如您所坚持的那样，我在寻找所需答案的类型上多了一些（保留滚动条，但使它们无效）
因此，这是一种新的实现方法，希望有什么好处？

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

演示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>

一页滚动网站-但是如何在动画制作完成之前禁用滚动

1 个答案: