如何结合scale样式与hover事件：实现图片悬停缩放不裁剪且保留scrollbar

问题 #

现有一个包含图片与滚动条的容器，需求是触发hover事件时对图片应用scale缩放，当前实现代码如下。但悬停时图片会被裁剪——移除overflow样式可解决裁剪问题，但容器会失去滚动条。请问如何实现图片hover缩放不被裁剪，同时保留容器的滚动条？

原实现代码 #

CSS

img {
  width: 28px
}

button:hover img {
  cursor: pointer;
  background-color: #3c3f43;
  border-radius: 4px;
  transform: scale(4.0)
}

HTML

<div id="container">
  <div style="width: 300px; height: 50px;"></div>
  <div style="overflow: auto; width: 200px; height: 50px">
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
  </div>
</div>

解决方案 #

方法一：让缩放图片脱离滚动容器的裁剪限制 #

核心是给每个按钮添加一个隐藏的备用图片，hover时隐藏原图片，显示备用图片并设置绝对定位，让它脱离滚动容器的overflow约束，同时通过定位调整让缩放后的图片居中显示。

修改后代码示例：

CSS

img {
  width: 28px;
}

.scroll-container {
  overflow: auto;
  width: 200px;
  height: 50px;
}

.emote-btn {
  position: relative;
}

/* 隐藏原图片，显示缩放用的备用图 */
.emote-btn:hover .emote-origin {
  visibility: hidden;
}
.emote-btn:hover .emote-scale {
  display: block;
  cursor: pointer;
  background-color: #3c3f43;
  border-radius: 4px;
  transform: scale(4.0);
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform-origin: center;
  translate: -50% -50%;
}

.emote-scale {
  display: none;
  width: 28px;
}

HTML

<div id="container">
  <div style="width: 300px; height: 50px;"></div>
  <div class="scroll-container">
    <button class="emote-btn">
      <img class="emote-origin" src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x">
      <img class="emote-scale" src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x">
    </button>
    <!-- 剩余按钮重复上述结构 -->
    <button class="emote-btn">
      <img class="emote-origin" src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x">
      <img class="emote-scale" src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x">
    </button>
  </div>
</div>

方法二：调整滚动容器的父元素溢出规则 #

给滚动容器套一层父元素，设置父元素overflow: visible不限制溢出，同时让滚动容器保持自身的滚动功能，hover时将图片设置为绝对定位，脱离滚动容器的内容流，避免被裁剪。

修改后代码示例：

CSS

img {
  width: 28px;
}

.scroll-wrapper {
  overflow: visible;
}

.scroll-container {
  overflow: auto;
  width: 200px;
  height: 50px;
  position: relative;
}

button {
  position: relative;
}

button:hover img {
  cursor: pointer;
  background-color: #3c3f43;
  border-radius: 4px;
  transform: scale(4.0);
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform-origin: center;
  translate: -50% -50%;
}

HTML

<div id="container">
  <div style="width: 300px; height: 50px;"></div>
  <div class="scroll-wrapper">
    <div class="scroll-container">
      <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
      <!-- 剩余按钮保持原有结构 -->
    </div>
  </div>
</div>

内容的提问来源于Stack Exchange，提问作者Viewed