在CSS中，如何在元素溢出时使window不可滚动？

Question

代码如下：

div.circle {
 height: 134px;
 width: 134px;
 background-color: #000;
 margin: 50vh auto 0;
 transform: translateY(-50%);
 border-radius: 50%;
 animation-name: expand;
 animation-duration: 2s;
 animation-timing-function: ease-in; 
 animation-direction: alternate;
 animation-iteration-count: infinite;
 overflow: hidden;
 
}


@keyframes expand {
 from {height:134px; width: 134px;}
 to {height:2000px; width:2000px;}
}

<div class="circle"></div>

当圆圈大于window时，window变成可滚动的，当我滚动鼠标时会出现一个滚动条。使用 overflow:hidden 无法阻止这种情况..

有没有人知道如何在元素变得大于 window 时隐藏滚动条并锁定 window？

Answer 1

overflow:hidden 如果您将它应用到 body 而不是您的圈子

会起作用

body {
    overflow: hidden;
}
div.circle {
 height: 134px;
 width: 134px;
 background-color: #000;
 margin: 50vh auto 0;
 transform: translateY(-50%);
 border-radius: 50%;
 animation-name: expand;
 animation-duration: 2s;
 animation-timing-function: ease-in; 
 animation-direction: alternate;
 animation-iteration-count: infinite;
 overflow: hidden;
 
}


@keyframes expand {
 from {height:134px; width: 134px;}
 to {height:2000px; width:2000px;}
}

<div class="circle"></div>

在CSS中，如何在元素溢出时使window不可滚动？

In CSS, how to make the window non-scrollable when an element overflows?

html

css

animation

overflow