CSS Transform-Origin Center Overflow 滚动不是全宽

Question

我进行了搜索，但找不到解决方案，甚至找不到相关想法。

我们在可滚动的父元素中有一个子元素。我们将 child 转化为更大的比例。当 transform-origin 位于左上角时，overflow: scroll 正常工作，您可以滚动整个内容。当 transform-origin 位于中心顶部时，它会缩放，但 overflow: scroll 仅从中点开始，无法滚动到 child 的前半部分。

这里有一个简单的例子来展示它是如何工作的:

.wrapper {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid #888;
  overflow: auto;
  position: relative;
  border-radius: 0.001px;
}
.scale {
  border-radius: 0.001px;
  position: relative;
  background-color: #ffff88;
  transform: scale(1);
  transform-origin: center top;
  transition: all 0.5s ease-in-out;
}
.scale--2{
  transform-origin: top left;
}
.scale {
  transform: scale(4);
}

<div class="wrapper">
  <div class="scale">First text - I'm scaling center top</div>
</div>
  <div class="wrapper">
  <div class="scale scale--2">First text - I'm scaling top left</div>
</div>

在这一点上的任何想法或技巧都会很棒。

Answer 1

CSS3 transform 有 nothing to do with your issue ← 您可以通过在标准(更宽的)子元素上使用简单的 left: -100px; 来复制相同内容。

1. (取决于文本方向)如果您将元素向左偏移到父边界之外 - 浏览器不会为您绘制滚动条 - 这样的元素只会被吃掉溢出滚动父边缘。

2. 如果 child 更宽 - 浏览器将绘制 UI 滚动条

3. 但是，如果您将那个宽子节点移到负左侧...请再次阅读第 1 点。

这种情况可以表示为scrollWidth = childWidth - eatenLeftPortion

因此

• 浏览器绘制 UI 滚动条
• CSS 不能移动滚动条。
• 如果元素被推到负上或左(文本方向 ltr；右 rtl)，浏览器不会绘制滚动条

解决方案

• 使用 transform-origin: top left; 缩放你的元素(你的第二个例子)
• (现在滚动条处于完全可滚动状态，因为没有吃剩的部分)
• 使用 JavaScript 动画或移动 scrollLeft (parentScrollWidth -
父级宽度)/2

var parent   = document.querySelector('.wrapper');
parent.scrollLeft = (parent.scrollWidth - parent.clientWidth) / 2 ;

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}


.wrapper {
  position: relative;
  overflow: auto;
  width: 200px;
  height: 140px;
  border: 1px solid #888;
}

.scale {
  position: relative;
  background-color: #ffff88;
  transform-origin: left top;
  transform: scale(4);
}

<div class="wrapper">
    <div class="scale">I'm scaling center top</div>
</div>