Set scrollbar on top of Center Component

asked 2021-03-26 18:43:53 +0800

aUser
137 ● 1 ● 4

Hello,

i have a zul file like this:

<window height="700px" viewModel="@id('vm') @init('myViewModel')" >
    <borderlayout height="100%">
        <center id="centerComponent" autoscroll="true" border="normal" >
            <div id="imageContainer" >      
                <image id="previewComponent"  width="100%" height="100%"
                       content="@load(vm.preview)">
                </image>
            </div>
        </center>
    </borderlayout>
</window>

When i change the content of the image inside the center comopnent i use the NotifyChange annotation and the new image is shown, which is fine. All of the images by the way are scrollable in the y direction, so assume i'm viewing image1 and i scroll the center component to view the bottom of the image1. Now i select image2, notify the change to update the image and image2 is shown, but the scroll is still on bottom of the center component. How can i make it go on top everytime i change the content of the image?

I tried to use

<image ..>
    ..
    <attribute name="onAfterSize">
        self.invalidate();
    </attribute>
</image>

but this method is called in an infinite loop, i don't know why honestly. Also i've read here that the invalidate method is called every time the src of the image is changed, but here i'm changing the content, so this is why i tried invalidate. However i'd like to avoid at all costs this method because although it kinda works, i see like a "flash" every time i change images, which is annoying.

Clients.scrollTo(0,0);

This would not be an option in my opinion because i have multiple scrollbars in my page (3 actually) and i need to reset on top only the scroll of the center component.

Any ideas? Thank you