# Set scrollbar on top of Center Component

aUser
123 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%"
</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

delete retag edit

Sort by » oldest newest most voted

Bobzk
442 1 7

Not totally sure this is what you need but use Javascript as per

Get and Set Scroll Position of an Element

But still I am thinking what event to do it in.

But how can i refer to the center's component scrollbar? What should be the selector in this case?

( 2021-03-26 21:45:23 +0800 )edit

Bobzk
442 1 7

This all a bit "back of a fag packet" at the moment but ;

    <center id="centerComponent" autoscroll="true" border="normal" xmlns:w="client" w:onAfterSize="doScroll(this)">


Or something similar. have a play, you could put the setScoll directly between quotes or in the function doScroll(this).

I'm just sort of pointing you in (hopefully) a direction that will work. Still not sure onAfterSize is the best event!

Probably someone else will say I'm talking rubbish and there is a quicker/easier way (:-)

Thanks for the help! I'll try your approach these days and post the response as soon as possible

( 2021-03-26 22:47:11 +0800 )edit

You might want to also try "w:onBind", which I know is called after an "invalidate' (which you don't want to do) but not sure if it is called after you change the image SRC. Try it and see.

( 2021-03-27 20:51:08 +0800 )edit

I solved using "Clients.focus(center)" where center is the center of the border layout component. Turns out that this is sufficient to kinda "scroll the component into the view" without calling Clients.scrollIntoView(comp). I'm fine with this solution. Thank you for the help though!

( 2021-03-29 21:33:49 +0800 )edit

aUser
123 4

In my case, Clients.focus(center) is sufficient since it brings the scrollbar of the center component on top, which is what i wanted. center is the center part of the borderlayout component here. Clients.scrollIntoView(center) was not needed for this purpose, so i ended up not using it this time.

[hide preview]

## Stats

Seen: 9 times

Last updated: Mar 29

Support Options
• Email Support
• Training
• Consulting
• Outsourcing