Question

我已经搜索过，无法找到解决方案甚至是想法。

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

这是一个简单的示例，展示了它的工作原理：

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

此时的任何想法或黑客都会很棒。

Answer 1

CSS3 transform有 nothing to do with your issue ←您可以在标准（更宽）的子元素上使用简单的left: -100px;来复制它。

（取决于文本方向）如果您将一个元素偏离父边界 - 浏览器将不会为您绘制滚动条 - 这样的元素只会被吃掉溢出滚动父边缘。
如果孩子更宽 - 浏览器会绘制UI滚动条
但如果你将那个宽大的孩子移到负面的左边......再次阅读第1点。

案例可以表示为scrollWidth = childWidth - eatenLeftPortion

<强>因此

浏览器绘制UI滚动条
CSS 无法移动滚动条。
浏览器不会绘制滚动条，如果元素被向上或向左推（在文本方向ltr;向右用于rtl）

解决方案

使用transform-origin: top left;（您的第二个示例）
（现在滚动条处于完全可滚动的状态，因为没有吃掉的部分）
使用 JavaScript 动画或scrollLeft移动(parentScrollWidth - parentWidth) / 2

＆＃13;

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

＆＃13;

/*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);
}

＆＃13;

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

＆＃13;

Answer 2

对于使用反映子元素居中位置的父滚动条在父div中居中子元素，我使用以下由范围输入处理的代码：

var scaleValue = $('#mySliderRange').val();

// Handles child scaling
child.css({'width':scaleValue+'%','height':scaleValue+'%'});

// Keeps child in vertical middle position
parent.scrollTop((child.height() - parent.height())/2);

// Keeps child in horizontal middle position
parent.scrollLeft((child.width() - parent.width())/2);

上面的设置是在处理以CSS3为中心的缩放时代替不可靠的父滚动条定位的问题。希望这可以帮助。

CSS转换 - 原点中心溢出滚动不完整宽度

2 个答案: