CSS scroll bar issue
I am creating a web application that uses the CSS scaling property. As shown in the image below, I have an object inside a container that fits nicely and snug inside, without any overflowing content. This is how I want it to be.
My problem occurs when I rescale an object to a size larger than the container. As shown in the image, the object is obviously larger than the container. As indicated by the arrows and "scrollable area" labels, the container can scroll to these areas, but the parts marked "hidden" are not visible or accessible through the scroll due to overflow.
For a practical view of my problem, here's a link to the code with my code:
Snippets of my CSS code area as follows:
#container {
position: fixed;
width: 300px;
height: 200px;
border: 1px solid #000000;
left: 0px;
top: 0px;
margin-left: 330px;
margin-top: 10px;
overflow: scroll;
display: block;
text-align: center;
}
#object {
position: relative;
width: 120px;
height: 120px;
display: inline-block;
background-color: rgba(255, 0, 255, 0.45);
margin-top: 40px;
border-radius: 25px;
transform: scale(3); /* This would be scale(1) on the small object */
}
This issue is holding back the development of my web application, so well in advance of your time and contributions.
source to share
My best guess is that this is due to the transformation of the origin. Try setting it to 0 0
to fix your problem:
#object2 {
position: relative;
width: 120px;
height: 120px;
display: block;
background-color: rgba(255, 0, 255, 0.45);
border-radius: 25px;
transform: scale(3);
transform-origin: 0 0;
}
Demo codepen
source to share