Возможно ли исчезновение полос прокрутки, когда внутренний DIV преобразован (масштабирован), чтобы соответствовать внутреннему DIV? - PullRequest
Новая
       28

Возможно ли исчезновение полос прокрутки, когда внутренний DIV преобразован (масштабирован), чтобы соответствовать внутреннему DIV?

0 голосов
/ 16 января 2020

Пожалуйста, посмотрите это интерактивное jsfiddle: https://jsfiddle.net/asefkow/Lnf3tub2

HTML

<div id="outside" style="width:200px; height:200px; overflow:auto; border: 1px solid black;">
  <div id="inside" style="background-color: red; transform-origin: 0 0;">
  </div>
</div>
<br />
Inner: <input id="inner" type="text" value="" size="3">px
<br />
Scale: <input id="scale" type="text" value="1" size="3">
<br />
<button id="zoomin">Zoom In</button>
<button id="zoomout">Zoom Out</button>

JS

var doSize = function(s) {
  document.getElementById('inner').value = Math.round(s);
  document.getElementById('inside').style.width = (s + "px");
  document.getElementById('inside').style.height = (s + "px");
}

var doZoom = function(s) {
  document.getElementById('scale').value = Math.round(s * 100) / 100;
  document.getElementById('inside').style.transform = "scale(" + s + ")";
}


document.getElementById('inner').addEventListener('change', function(e) {
  doSize(event.currentTarget.value);
});

document.getElementById('scale').addEventListener('change', function(e) {
  doZoom(event.currentTarget.value);
});

document.getElementById('zoomin').addEventListener('click', function(){ 
  doZoom(parseFloat(document.getElementById('scale').value) + 0.1);
});

document.getElementById('zoomout').addEventListener('click', function(){
  doZoom(parseFloat(document.getElementById('scale').value) - 0.1);
});

doZoom(1);
doSize(200);

Существует внешний DIV и внутренний DIV, оба квадратных прямоугольника. Рассмотрим два случая:

1) Внутренний DIV изначально меньше , чем внешний DIV

  • , изначально полоса прокрутки отсутствует (правильно)
  • масштабирование внутреннего DIV приводит к увеличению полосы прокрутки (ожидается)

2) Внутренний DIV изначально больше , чем внешний DIV

  • там изначально полоса прокрутки (правильная)
  • масштабирование внутреннего DIV меньшего размера приводит только к вертикальной полосе прокрутки (не ожидается)

Почему вертикальная полоса прокрутки остается? Например, попробуйте 400 / 0,5 в скрипте выше.

...