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

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>

当圆圈变得大于窗口时，窗口变为可滚动，滚动鼠标时会出现滚动条。使用overflow:hidden无法阻止此..

当元素变得比窗口大时，有没有人有关于如何隐藏滚动条并锁定窗口的想法？

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>