如何实现overflow-y:scroll滚动且hover放大元素不被裁剪

问题描述 #

我创建了一个每行包含3个元素的网格布局，为了滚动查看全部元素给容器设置了overflow-y: scroll属性，同时给子元素添加了hover时scale:1.05的缩放效果，但设置滚动属性后，缩放的元素及其阴影被容器裁剪，无法完整显示。

原代码示例 #

CSS

.gridParent {
  height: 300px;
  width: 100%;
  background-color: #abdbe3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  overflow-y: scroll;
}

.child {
  height: 120px;
  background-color: #063970;
  color: white;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.child:hover {
  scale: 1.05;
}

HTML

<div class="gridParent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
</div>

问题原因 #

当容器设置overflow: scroll（包括auto、hidden）时，会创建一个裁剪上下文，容器内所有超出边界的内容都会被裁剪，子元素缩放后超出容器的部分和自然延伸的阴影都无法幸免。

解决方法 #

方法一：使用overflow-clip-margin（简单直接） #

给网格容器添加overflow-clip-margin属性，指定裁剪边缘外保留的空间，让缩放后的元素和阴影能完整显示：

.gridParent {
  height: 300px;
  width: 100%;
  background-color: #abdbe3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  overflow-y: scroll;
  overflow-clip-margin: 15px; /* 根据缩放比例调整数值，确保覆盖缩放范围 */
}

方法二：外层嵌套容器（兼容性更优） #

如果需要兼容不支持overflow-clip-margin的旧浏览器，可以给网格容器套一个外层容器，将滚动属性移到外层，网格容器本身不设置overflow，同时添加padding给缩放元素预留空间：

修改后的CSS

.gridWrapper {
  height: 300px;
  width: 100%;
  overflow-y: scroll;
}

.gridParent {
  width: 100%;
  background-color: #abdbe3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 15px; /* 给缩放元素和阴影留出显示空间 */
}

.child {
  height: 120px;
  background-color: #063970;
  color: white;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.child:hover {
  scale: 1.05;
}

修改后的HTML

<div class="gridWrapper">
  <div class="gridParent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
  </div>
</div>

这种方式让外层容器负责滚动，网格容器的padding给子元素缩放提供了额外空间，不会被裁剪，阴影也能完整显示。

内容的提问来源于stack exchange，提问作者Martin