禁用预加载器上的滚动答案

【问题标题】：Disable scrolling on preloader禁用预加载器上的滚动
【发布时间】：2022-01-14 21:59:13
【问题描述】：

如果预加载器处于活动状态，是否有办法禁止用户滚动？所以要禁用身体滚动。

如果你能帮助我，那就太棒了。

这是我的自动取款机代码：

<div id="preloader"></div>

#preloader{
    background: #000 url(images/preloader.gif) no-repeat center center ;
    background-size: 15%;
    height: 100%;
    width: 100vw;
    z-index: 100000;
    position: fixed;
}

var loader = document.getElementById("preloader");

window.addEventListener("load", function(){
    loader.style.display = "none";
})

【问题讨论】：

不知道我的回答是否能解决你的问题：）
对不起。不，它没有，因为用户没有点击任何按钮来查看预加载器。我已经用按钮点击我的全屏菜单做了一些事情（它有点像你建议的那样，但在这种情况下，它需要立即显示并且如果加载完成则不显示。我想我必须接受这个问题.
我添加了button 以显示禁用滚动的目的，但我刚刚更新了加载后将禁用滚动的代码。加载文档后，您将无法再滚动。检查它是否有效
另外，如果您能接受并支持我的回答，我将不胜感激：)
我会接受，但遗憾的是，如果在预加载器之后整个页面不可滚动，这不是一个解决方案。对不起。

标签： javascript html css scroll preload

【解决方案1】：

如果您需要禁用整页滚动，您可以将 overflow: hidden 设置为正文，然后在加载完成后将其返回

【讨论】：

我试过了，但是如果完成加载，正文将无法滚动。或者我做错了什么
@Louis，你需要在加载开始时设置document.body.style.overflow = 'hidden'，然后在加载结束时设置document.body.style.overflow = ''
好吧，但是在这些语句之前我需要设置什么？设置到 var loader 中？
@Louis，好吧，我不确定我是否理解最后一条评论，但我假设加载会立即显示，所以在var loader = document.getElementById("preloader"); 之后你输入document.body.style.overflow = 'hidden' ;。然后在加载函数中，您将 document.body.style.overflow = ''; 放在 loader.style.display = "none"; 之后，例如
我理解你的意思，但遗憾的是它不起作用。我已经像你说的那样设置了 var loader = document.getElementById("preloader"); document.body.style.overflow = '隐藏'; window.addEventListener("load", function(){ loader.style.display = "none"; document.body.style.overflow = ''; })

【解决方案2】：

我认为你不能真正从技术上禁用/取消滚动，但你可以尝试改变 scroll 的行为方式。

这是我制作的一个示例，当用户单击 button 和 preloader 变为活动状态时，它可以避免您滚动。

var loader = document.getElementById("preloader");

window.addEventListener("load", function(){ 
      window.onscroll = function(){window.scrollTo(0,0)};
})

#preloader{
   /* background: #000 url(images/preloader.gif) no-repeat center center ;*/
    background-size: 15%;
    width:200px
    
    z-index: 100000;
    position: fixed;
}

<div id="preloader">Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]

The website serves as a platform for users to ask and answer questions, and, through membership and active participation, to vote questions and answers up or down similar to Reddit and edit questions and answers in a fashion similar to a wiki.[13] Users of Stack Overflow can earn reputation points and "badges"; for example, a person is awarded 10 reputation points for receiving an "up" vote on a question or an answer to a question,[14] and can receive badges for their valued contributions,[15] which represents a gamification of the traditional Q&A website. Users unlock new privileges with an increase in reputation like the ability to vote, comment, and even edit other people's posts.[16]

As of March 2021 Stack Overflow has over 14 million registered users,[17] and has received over 21 million questions and 31 million answers.[18] Based on the type of tags assigned to questions, the top eight most discussed topics on the site are: JavaScript, Java, C#, PHP, Android, Python, jQuery, and HTML.[19] Stack Overflow also has a Jobs section to assist developers in finding their next opportunity.[20] For employers, Stack Overflow provides tools to brand their business, advertise their openings on the site, and source candidates from Stack Overflow's database of developers who are open to being contacted</div>

【讨论】：