I am using this javascript to zoom in:

function zoomin() {
var GFG = document.getElementsByClassName("ImageClass")[0];
var currWidth = GFG.clientWidth;
GFG.style.width = (currWidth + 100) + "px";}

The class "ImageClass" is directly located on an image

I have the following CSS:

.list-size {
width: 700px;
max-width: 700px;
height: 700px;
max-height: 700px;
overflow-y: scroll;
overflow-x: scroll;
text-align: center;
vertical-align: baseline;}

.ImageClass {
max-width: 2000px;
max-height: 2000px;}

the class "list-size" is colocated on a div that encloses several divs and end up enclosing the image.

When I zoom in, the vertical scroll appear but the horizontal scroll does not.

Can someone help?

Thanks