以下是代码:
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>
当圆圈大于窗口时,窗口将变为可滚动状态,并且在滚动鼠标时将出现滚动条。使用
overflow:hidden
不能防止这种情况。有没有人想过当元素变得大于窗口时如何隐藏滚动条并锁定窗口?
最佳答案
如果将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>
关于html - 在CSS中,当元素溢出时,如何使窗口不可滚动?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32476207/