javascript - transform:scale() 使右下角的元素消失

Question

这只发生在 GOOGLE CHROME 和 WINDOWS 10 上

我正在制作一本检查用户屏幕尺寸并使用 transform:scale() 显示尽可能大的内容的翻书。然后有一个缩放按钮，可以增加/减少比例因子。我正在抓住鼠标并移动事件并允许用户通过用鼠标拖动来滚动。该应用程序是在 Angular 的帮助下构建的。我面临的问题是，当用户放大很多时，右下角的内容会消失。这是一个实时链接http://bg.e-prosveta.bg/fulldemo/4iyEkxtEbY-946/40?page=11。页面结构如下：

<div class="outer-pages-wrapper" [ngStyle]="{'max-width': (containerWidth - 100) + 'px', width: ((ebook.width * ebook.scaleFactor) + (hideRight ? 0 : (ebook.width * ebook.scaleFactor))) + 'px', height: (ebook.height * ebook.wrapperScaleFactor) + 'px'}">
  <div class="inner-pages-wrapper" [ngStyle]="{transform:'scale(' + ebook.scaleFactor + ')', '-ms-transform':'scale(' + ebook.scaleFactor + ')','-webkit-transform':'scale(' + ebook.scaleFactor + ')'}">
    <app-ebook-page></app-ebook-page>
    <app-ebook-page></app-ebook-page>
  </div>
</div>

一些相关的 CSS 规则：

.outer-pages-wrapper {
  display:flex;
  overflow: hidden;
}
.inner-pages-wrapper {
  transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  display:flex;
}

这是在 Windows 版 Chrome 上缩放 5-6 倍后发生的屏幕截图：

标签： javascriptcssangularcss-transforms

Answer 1

浏览器的放大是有限制的，如果超出限制，事情就不好看了。我的建议是将缩放限制到某个点，然后在达到限制时禁用缩放按钮。

为了解决这个问题 - 您可以将溢出设置为通用元素类。

#ebook-40 .ws0 {
  overflow: auto; 
}

希望这可以帮助。

没有溢出 -

有溢出 -