Javascript 禁用滚动直到动画完成

我有一个简单的动画，我想禁用网站上的滚动

在这个动画完成之前，它基本上应该像一个加载器

更新 非常感谢，但我有一个问题，很抱歉没有提及，因为我使用容器上的固定位置来进行平滑滚动，所以当我对任何元素使用“固定”位置时，它似乎不会粘在同一个位置。这是完整的代码

html

CSS

正文{
溢出x：隐藏；
溢出y：滚动；
背景：$bg颜色；
用户选择：无；
字体系列：“平台常规”；
}
#应用程序{
溢出：隐藏；
位置：固定；
高度：100vh；
宽度：100vw；
排名：0；
左：0；
右：0；
底部：0；
}
.scroll容器{
位置：绝对位置；
溢出：隐藏；
z指数：10；
显示器：flex；
证明内容：中心；
背面可见性：隐藏；
} 
.加载器{
宽度：100vw；
高度：100vh；
位置：绝对位置；
z指数：999999；
溢出：隐藏；
}
.loader___块{
位置：绝对位置；
宽度：0%；
高度：100vh；
背景:#111111；
动画：向左移动4s立方贝塞尔（.74、.06、.4、.92）向前移动；
}
@关键帧向左移动{
0% {
左：0；
宽度：0%；
}
50% {
左：0；
宽度：100%；
}
100% {
左：100%；
宽度：0；
}

这些容器有一个固定的位置和溢出隐藏，因为我在滚动和移动“y”位置时进行平滑的页面转换 如果有帮助的话，这里还有js

函数平滑滚动（）{
const html=document.documentElement；
const{body}=文件；
常量滚动条={
目标：document.querySelector（“#滚动容器”），
ease:0.06，//0；
如果（调整大小）{
常量高度=scroller.target.clientHeight；
body.style.height=`${height}px`；
scroller.resizeRequest=0；
}
const scrollY=window.pageYOffset | | html.scrollTop | | | body.scrollTop | 0；
scroller.endY=scrollY；
scroller.y+=（scrollY-scroller.y）*scroller.ease；
if（Math.abs（scrollY-scroller.y）<0.05 | |调整大小）{
scroller.y=scrollY；
scroller.scrollRequest=0；
}
TweenLite.set（scroller.target{
y:-卷轴。y，
});
requestId=scroller.scrollRequest>0？requestAnimationFrame（updateScroller）：空；
}
函数onScroll（）{
scroller.scrollRequest+=1；
如果（！requestId）{
requestId=requestAnimationFrame（updateScroller）；
}
}
函数onResize（）{
scroller.resizeRequest+=1；
如果（！requestId）{
requestId=requestAnimationFrame（updateScroller）；
}
}
函数onLoad（）{
updateScroller（）；
window.focus（）；
addEventListener（'resize'，onResize）；
文件。添加的文件列表（“滚动”，在滚动条上）；
}
window.addEventListener（'load'，onLoad）；
}

使用CSS规则

position:fixed；

在您的div上使用class

loader

，这样即使页面被滚动，它也始终保持在同一位置。 因此：

.loader{
宽度：100vw；
高度：100vh；
位置：绝对位置；
z指数：999999；
溢出：隐藏；
位置：固定；
}
.loader___块{
位置：绝对位置；
宽度：0%；
高度：100vh；
背景:#111111；
动画：向左移动4s立方贝塞尔（.74、.06、.4、.92）向前移动；
}
@关键帧向左移动{
0% {
左：0；
宽度：0%；
}
50% {
左：0；
宽度：100%；
}
100% {
左：100%；
宽度：0；
}
}

加载时，您可以将

溢出：隐藏
添加到
元素中。然后在加载完成后将其删除。@tasteoflifing我创建了一个小提琴[在您更新的示例中，加载程序似乎只加载了一半，这是您正在讨论的问题吗？该页面不存在，但我假设是的，当我滚动它时，它是正常滚动的，而不是固定位置，我想因为滚动容器也有固定位置？这是链接，working:，我在CSS部分（第22行）中做了评论，我观察到的问题之所以发生，是因为您使用class
滚动容器将
div
的位置设置为绝对。您好，谢谢您的帮助，不，这不是我的意思，id为app的主容器有一个固定位置，所以我无法将任何其他div设置为固定位置，明白了吗我之所以将main设置为固定位置，是因为我想实现平滑的页面滚动，比如像网站一样