居中 div 上的溢出不会隐藏

Question

是的，父容器的位置是相对的。

我正在尝试创建一种涟漪效果，方法是让几个圆圈从一个点向各个方向扩展，直到它们扩展到视口之外。

所以我得到了一些圆形且绝对定位的 div。它们居中，如下所示。我有一个添加 grow class 的点击处理程序，它增加了 div 的宽度和高度以展开它们。当圆圈扩展到视口之外时，y-overflow 隐藏得很好但不是 x-overflow。不知道是什么东西。

可能值得注意的是，当圆到达视口的左边缘时，它只会继续向所有其他方向扩展； window 的左边缘似乎是无法跨越的边界。

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

body {
  position: relative;
}

.circle {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-radius: 1000px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all 1s ease-in-out;
  overflow: hidden;
}

.grow {
  border: 1px solid #000;
  width: 2000px;
  height: 2000px;
}

$(".circle").click(function() {
  $(this).addClass("grow");
});

Answer 1

当您设置 'top'、'right'、'bottom' 和 'left' 都为零。您需要将元素设置为相对于其自身大小居中，并在其父元素上设置 overflow: hidden。一种方法是将 left: 设置为 50%，然后将 margin-left: 设置为元素大小的一半。像这样：

body {
  overflow: hidden;
}
.circle {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-radius: 1000px;
  margin: 0 auto;
  left: 50%;
  margin-left: -5px;
  transition: all 1s ease-in-out;
}

.grow {
  border: 1px solid #000;
  width: 2000px;
  height: 2000px;
  margin-left: -1000px;
}

我认为这符合您所说的。参见 this CodePen。

居中 div 上的溢出不会隐藏

Overflow on centered div won't hide

html

css

overflow