如何暂时禁用滚动?

我正在使用scrollTo jQuery插件，想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是，当你滚动而scrollTo是动画，它变得非常难看;)

当然，我可以做$("body").css("overflow"， "hidden");然后当动画停止时把它放回自动，但如果滚动条仍然可见但不活跃会更好。

当前回答

这段代码将工作在Chrome 56和进一步(原来的答案不再工作在Chrome上)。

使用DomUtils.enableScroll()来启用滚动。

使用DomUtils.disableScroll()禁用滚动。

class DomUtils {
  // left: 37, up: 38, right: 39, down: 40,
  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  static keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

  static preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;
  }

  static preventDefaultForScrollKeys(e) {
    if (DomUtils.keys[e.keyCode]) {
      DomUtils.preventDefault(e);
      return false;
    }
  }

  static disableScroll() {
    document.addEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Disable scrolling in Chrome
    document.addEventListener('keydown', DomUtils.preventDefaultForScrollKeys, {
      passive: false,
    });
  }

  static enableScroll() {
    document.removeEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Enable scrolling in Chrome
    document.removeEventListener(
      'keydown',
      DomUtils.preventDefaultForScrollKeys,
      {
        passive: false,
      }
    ); // Enable scrolling in Chrome
  }
}

2019-07-10 18:21:41

其他回答

我也有同样的问题，下面是我处理它的方法。

/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");

/* file.css */
.no-scroll{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

希望这对你有所帮助。

2017-12-18 03:55:52

使用Javascript函数切换overflowY，同时切换移动菜单的可见性。比如这个:

function handleClickMobileMenu() {
  document.body.style.overflowY = isMobileMenuOpen ? "hidden" : "scroll";
  //...
}

在打开和关闭移动菜单时调用该函数。最好的用例是当你的移动菜单是完全视口区域。

2021-06-11 00:56:02

基于Cheyenne Forbes的回答，以及我在这里通过fcalderan找到的答案:只是禁用滚动而不是隐藏它? 并修复了Hallodom的滚动条消失的问题

CSS:

.preventscroll{
    position: fixed;
    overflow-y:scroll;
}

JS:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

这段代码确实会跳到页面的顶部，但我认为fcalderan的代码有一个解决方案。

2017-08-13 19:27:14

你可以这样做:

这样你就节省了“无关紧要”的内存，Position: fixed中的元素没有移动，因此不会影响你的设计本身。

CSS(使用CSS使您的生活和记忆更容易)

html[DisableScroll] {
    overflow-y: scroll;
}

html[DisableScroll] body {
    overflow-y: hidden;
    height: 100vh;
}

var enableScroll = function () {
   document.documentElement
     .removeAttribute('DisableScroll');
}

e.g

//When you want to enable escroll just call this function; var enableScroll = function () { document.documentElement .removeAttribute('DisableScroll'); } setTimeout(() => { enableScroll(); }, 2000); *{ margin: 0px; padding: 0px } body{ height: 4000px; background: #141417 } html[DisableScroll] { overflow-y: scroll } html[DisableScroll] body { overflow-y: hidden; height: 100vh; } body>p{ color: #FBFBFD } div{ position: fixed; left: 0; right: 0; margin: auto; width: 270px; background: #FBFBFD; color: #141417; text-align: center } <!DOCTYPE html> <html lang="en" DisableScroll> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ </div> @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ </body> </html>

2021-10-21 14:55:39

对我来说，这并没有带来任何内容跳跃。

禁用滚动:

this.htmlBody = $('body')
this.scrollPos = document.documentElement.scrollTop
this.htmlBody.css('top', -this.scrollPos + 'px').addClass('disable-scroll')

重新启用滚动:

this.htmlBody.removeClass('disable-scroll')
$(window).scrollTop(this.scrollPos)

而CSS:

body.disable-scroll {
  position: fixed;
  width: 100%;
}

2021-05-16 14:31:07

如何暂时禁用滚动?

推荐文章

最新文章

标签