以下是代码:



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/

10-12 12:33
查看更多