代码之家 › 专栏 › 技术社区 › The Old County

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

css jquery javascript

The Old County · 技术社区 · 5 年前

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

--如果我使用类似附加到body-to-overlow的类:hidden,它将jar

--是否删除滚动侦听器并重新附加它们?我担心这会导致用户体验出现故障——也许不是滚动到(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);

0 回复 | 直到 5 年前

Mister Jojo Åukasz Daniel Mastalerz 5 年前

在正文中使用css:

.noScroll {  overflow: hidden !important; }

JS公司:

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

[编辑]回应 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>

[编辑: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>