How to propagate scroll to parent ?

[cimpok]

Thank you Norserium for this cool component!

What would be the best practice to propagate the scrolling to the parent when the drag reaches the upper/lower limits in the cropper?

I am using the Cropper in a scrollable main div, the cropper when activated is taking up most of the screen area making it difficult to touch and drag the outside area to scroll elsewhere on the website. I am now leaving a thick margin to allow the user to touch it for scrolling. Is it possible to watch the event of the stencil or the image dragging stopping at the upper and lower limits and propagate this event to the parent's scrolling method to allow the user scroll away the parent div by dragging the cropper beyond its limits in the vertical direction. Thank you for any clues.

[Norserium]

@cimpok, it's not easy to do. The preventing of the transform event happens before that event will been processed.

Is it possible to watch the event of the stencil or the image dragging stopping at the upper and lower limits and propagate this event to the parent's scrolling method

Moreover, I assume, that your solution may give the better user experience, but still not the best one, because an user doesn't know what's the upper and lower limits (in general case). Why the cropper stops zooming and window scrolls up? Why the cropper doesn't zooming out and scrolls down?

Perhaps, the better solution is the solution that used in the Google Maps API.

[Norserium]

@cimpok, could you take a look at the example in the another cropper at the "Scroll the cropper" section (it's the React library, but anyway). Do you want to achieve the similar behavior?

If not, could you explain the alternative. For example, the cropper can allow the default event when you can't resize the image anymore. It works good when you scroll down at initial zoom, but it doesn't work when you scroll up.

[cimpok]

@Norserium, yes, It's a nice solution, thank you.

The two-fingered operation would not be obvious for me, (for zooming it is), but that's why the on-screen hint, I think this is an elegant solution.

I observed an interesting positive side effect on my Android tablet running Chrome (at least I don't think it was intended): if I begin the scroll-up on the last image (with this backgroundwrapper feature) with enough momentum that the inertia-scroll is not stopping until I can touch any next image, I was able to maintain the scrolling forever even when only touching the cropper images without this feature.

I will look at the React code how it is done, I would like to implement it in my Vue3 code. Is it a workaround we can do in the parent component, or also your Vue component needs some update for this ?

[Norserium]

I will look at the React code how it is done, I would like to implement it in my Vue3 code

It can't be ported easily. This library is the my port of this library to React, that was totally rewritten. I have plans to port it back to Vue, but it will be later. I assume when its beta testing over.

Is it a workaround we can do in the parent component, or also your Vue component needs some update for this ?

I will try to figure out something. It's possible. The question is how beautiful it will be, because it will be some sort of a workaround anyway due to architecture limits.

I observed an interesting positive side effect on my Android tablet running Chrome (at least I don't think it was intended)

It's the peculiarity of the browser behavior. And, yes, it's nice.

[Norserium]

@cimpok, I will try to offer some solution in 24 hours. I recommend to not spend time on this task up to this point.

[Norserium]

@cimpok, well, I did port the corresponding code from the React library. There is the sandbox to test. The changes are available in 2.7.0 (Vue 3) and 1.9.0 (Vue 2).

[cimpok]

Wow @Norserium ! Perfect, thank you. ...and you have even managed to include it in the documentation, (i wish I could solve my coding problems that fast :)

[Norserium]

@cimpok, you are welcome! This feature is described in the documentation now shortly ("Scroll the cropper" section). Additional documentation is required, but it's better than nothing.

[Norserium]

@cimpok, is this issue still actual?

[cimpok]

@Norserium you mean we can close the issue, sorry I'm quite new in github commenting. Thanks again.

[Norserium]

@cimpok, you are welcome!

That's exactly what I mean. I prefer that an issue creator closes his issue himself once this issue is resolved to prevent any sort of misunderstanding.

Sometimes, however, I don't get a response and close an issue himself.