0

Set scrollbar on top of Center Component

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

aUser gravatar image 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%"
                       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

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted
0

answered 2021-03-26 21:26:36 +0800

Bobzk gravatar image 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.

link publish delete flag offensive edit

Comments

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

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

answered 2021-03-26 22:33:15 +0800

Bobzk gravatar image 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 (:-)

link publish delete flag offensive edit

Comments

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

aUser ( 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.

Bobzk ( 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!

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

answered 2021-03-29 21:39:04 +0800

aUser gravatar image 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.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

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

Seen: 9 times

Last updated: Mar 29

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More