在CSS中，如何在元素溢出時使窗口不可滾動？

Question

以下是在代碼：

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

 

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

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

當圓變得大於窗口越大，窗口變得滾動，當我滾動鼠標的滾動條將出現。使用overflow:hidden無法防止這種情況..

有沒有人有關於如何隱藏滾動條和鎖定窗口時，一個元素變得比窗口大？如果你將它應用到body不是你的圈子

Answer 1

overflow:hidden會工作

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

 

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

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