-2

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/

Rahul
  • 1
  • 1

1 Answers1

0

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;
}
MagnusEffect
  • 3,363
  • 1
  • 16
  • 41
  • That actually gives scroll for the left but removes the right side. I need full access to the img. i.e. TOP /LEFT /RIGHT /BOTTOM. – Rahul Dec 09 '21 at 05:58
  • so you need scrollbar to all four sides? If yes, you can refer here https://stackoverflow.com/questions/24804500/can-you-have-scrollbars-in-both-parallel-sides-of-a-div – MagnusEffect Dec 09 '21 at 06:01
  • I need scrollbar by which I access the whole image (the default horizontal and vertical scrollbars). As you can see, after it is being scaled, Some part of the Img goes out and remains inaccessible. – Rahul Dec 09 '21 at 07:02
  • That certainly didn't helped. After img is scaled, the portion outside div remains inaccessible – Rahul Dec 09 '21 at 07:03