在中心缩放后如何获取图像/div左侧的滚动条

Question

I'm centering an image using display:flex & justify-content:center and using some zoom buttons to scale the image when they're clicked.

The issue is that I'm not able to get a scroll bar to go to the Left Side of the image after it is scaled.

I checked about the scaling property and learned that it scales the (0,0) coordinates and possibly I'm trying to go the negative coordinates ( https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()#scaling_the_x_and_y_dimensions_together )

Is there anything i can do to go to have full access of the image after it is being scaled? (by full access i mean to the left/right/top/bottom) Here is the fiddle for reference: https://jsfiddle.net/r9sdhjyz/1/

Answer 1

As far as I understand, you want scroller to the left side.

Just add direction: rtl; in the styling of parent element like this

#parent{
  height:400px;
  width:400px;
  overflow:scroll;
  display:flex;
 justify-content:center;
 direction:rtl;
}