CSS Transform Scale отсекает содержимое от оболочки - PullRequest
Новая
       11

CSS Transform Scale отсекает содержимое от оболочки

1 голос
/ 26 февраля 2020

У меня есть контейнер-обертка с фиксированной высотой и шириной, и для него установлено значение overflow: scroll. Внутри у меня есть куча другого контента, который можно просмотреть, прокрутив его.

У меня также есть кнопка увеличения и уменьшения. Кнопки применяют transform: scale(x) к контенту, который, кажется, работает просто отлично. Я установил transform-origin как центр того, что видно в оболочке, проверив значение scrollTop оболочки.

Однако моя проблема заключается в том, что при увеличении содержимого обрезается оболочкой (ожидается), но недоступен при прокрутке (неожиданно).

Я создал пример своей проблемы с JSFiddle , а также опубликую код здесь: 

let zoom = 1;

function fnZoom(zoomModifier) {
    zoom += zoomModifier;
    let scrollTop = document.getElementById("a").scrollTop;
    document.getElementById("b").style.transformOrigin = `150px ${scrollTop + 100}px`;
	  document.getElementById("b").style.transform = `scale(${zoom})`;
}
#a {
  margin: 0 auto;
  overflow: scroll;
  width: 300px;
  height: 200px;
  border: 3px solid red;
  overflow: scroll;
}
#b {
  transform: scale(1);
  transform-origin: 0 0;
  width: 300px;
  height: 20000px;
  background-color: lightyellow;
}
#c {
  margin-top: 100px;
  width: 100%;
  background-color: skyblue;
}
<html>
<body>
  <div id="a">
    <div id="b">
      Test
      <p id="c">
        middle
      </p>
    </div>
  </div>
  <button onclick="fnZoom(0.1)">zoom-in</button>
  <button onclick="fnZoom(-0.1)">zoom-out</button>
</body>
</html>

Обратите внимание, что если вы нажмете кнопку увеличения, она будет правильно масштабировать контент, но обрезанная часть контента будет недоступен при прокрутке.

Есть ли способ исправить это, чтобы можно было прокрутить содержимое?

Несколько замечаний:

  • Невозможно использовать jQuery
  • Предпочитает CSS решения на основе JavaScript решений, но примет либо это работает
...