1

So I've got a div with a child element, and the child element is zoomable. To zoom the child element, I use matrix to transform to the new scale, but I'm noticing an issue: when the scale is greater than 1, the child element is larger than the scroll bar of the parent element, so when you scroll to the end, some of the child element is cut off. How do I fix this?

EDIT

I've tried setting overflow: scroll as opposed to the overflow: auto that I"m currently using, and I've tried expanding the width/height of the parent div, but neither worked. Expanding the width/height of the parent div just makes it larger on the page

EDIT 2

According to this stackoverflow question, what I needed was to add the style transformOrigin: 0 0 when I zoom the chart. that fixes the cropping

Peter Weeks
  • 291
  • 2
  • 16

1 Answers1

1

Hope this helps someone who finds this answer via Google like I did.

I had an issue like this where the parent wouldn't scroll past the original height of the child, so if I scaled the child up, the parent would stop scrolling before reaching the end of the child element. And if the child was scaled down, the parent would scroll past the end of the child element, letting the child element scroll out of view.

The way I solved this problem was to put the child element inside a wrapper element, with the height of the wrapper element set to the original height of the child element, and the wrapper element set to overflow = hidden. Then, when scaling the child element up or down, I change the height of the wrapper element by the same scale (via javascript).

HTML

<div id="parent">
    <div id="wrapper">
        <div id="child">
            Content goes here
        </div>
    </div>
</div>

CSS

#parent {
    height: 300px;
    overflow: auto;
}

#wrapper {
    height: 1200px;
    overflow: hidden;
}

#child {
    height: 1200px;
}

JavaScript/jQuery

function zoomChild(scale) {
    var originalHeight = 1200;
    $('#child').css('transform', 'scale(' + scale + ')');
    $('#wrapper').css('height', (originalHeight * scale) + 'px');
}
wuijin
  • 19
  • 2