search

jtanadi / scotty

WebSocket-enabled PDF viewer
http://raa-scotty.herokuapp.com/
MIT License
15 stars 1 forks source link

Recenter page when zooming in/out #65

Open jtanadi opened 4 years ago

jtanadi commented 4 years ago

The typical/expected behavior when zooming in and out is that the image is scaled up and down with the center of the view as the point of origin (ie. the center stays in place).

When we zoom in/out, we're using css scale() transform, using transform-origin: top. This is to prevent parts of the image from being obscured by other components / leaving the view area of the page.

So... this means that we will have to rely on JS to re-center the image somehow. Can we somehow use elmt.scrollLeft and elmt.scrollTop?

jtanadi commented 4 years ago

This is implemented in #68, but the overall effect is kind of choppy because the browser scrolls to defined location after zooming/scaling and React ends up rendering twice. So far, it doesn't seem like you can scroll before scaling, but maybe there's a way to have React only render after scroll?

Also would be nice to add some sort of smooth transition.

jtanadi commented 4 years ago

MDN article on Scroll-linked effect