当 chrome 中的比例发生变化时，滚动条不会被修改答案

【问题标题】：Scrollbar not getting modifed when scale changes in chrome当 chrome 中的比例发生变化时，滚动条不会被修改
【发布时间】：2017-01-04 03:51:09
【问题描述】：

我有一个 div，在那个 div 里面我有一个 'svg' 元素。我想放大，每次点击'svg'元素的'scale'值都会增加，从而产生缩放效果。但是，由于某种原因，当内部“svg”的比例增加时，父 div 的滚动条不会被修改。这个问题只发生在 Chrome 中，在 IE 中我实际上得到了想要的结果。

fiddle example

var elementToScale = document.getElementById('svg');
var scale = 1;

document.getElementById('zoom').addEventListener('click', function() {
  scale += 0.1
  elementToScale.style.transform = "scale(" + scale + ")";
});

div {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  overflow: scroll;
}
svg {
  border: 1px solid black;
}

<div>
  <svg width=300px height=300px id="svg">
    <rect width=200 height=200 x=50 y=50 fill="red" />
  </svg>
</div>
<br>
<button id="zoom">
  ZoomIn
</button>

【问题讨论】：

标签： javascript html css css-transforms

【解决方案1】：

据我所知，似乎是div 没有按应有的方式更新，而不是svg 本身。这意味着您需要做的是强制浏览器重绘 div 元素，可以按此处所示完成

var elementToScale = document.getElementById('svg');
var divRedraw = document.getElementById('divRedraw'); //gets the div element
var scale = 1;

document.getElementById('zoom').addEventListener('click', function() {
  scale += 0.1
  elementToScale.style.transform = "scale(" + scale + ")";
  divRedraw.style.display = 'none'; //hides the element
  divRedraw.offsetHeight; //let's the browser "catch up" on the code so it gets redrawn
  divRedraw.style.display = ''; //shows the element again
});

div {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  overflow: scroll;
}
svg {
  border: 1px solid black;
}

<div id="divRedraw">
  <svg width=300px height=300px id="svg">
    <rect width=200 height=200 x=50 y=50 fill="red" />
  </svg>
</div>
<br>
<button id="zoom">
  ZoomIn
</button>

【讨论】：