缩放内容并使用浏览器的滚动条

Question

我已经编写了以下函数来css-zoom我的内容效果很好：

function zoomContent(currentZoom) {
    $('#myContent').css({
        'transform': 'scale(' + currentZoom + ')',
        '-webkit-transform': 'scale(' + currentZoom + ')',
        '-moz-transform': 'scale(' + currentZoom + ')',
        '-o-transform': 'scale(' + currentZoom + ')',
        '-ms-transform': 'scale(' + currentZoom + ')',
        '-moz-transform-origin': '50% 0%',
        '-o-transform-origin': '50% 0%',
        '-webkit-transform-origin': '50% 0%',
        '-ms-transform-origin': '50% 0%',
    });

并将div放在main中：

<div role='main' class='ui-content'>
   <div id='myContent'></div>
</div>

我的问题是如何告诉浏览器主滚动条反映缩放的内容？

我尝试设置html,body { overflow: auto; }但滚动条没有改变。设置.ui-content { overflow: auto; }会添加另一个滚动条，但我想避免使用它。