Moving scrollbar to the bottom position (in a scrollable container)
Added by Jukka Aho almost 10 years ago
Hi!
Let's say I have a scrollable container.
Let's also say I will be adding new items to the bottom of this container and would like to keep the most recently added item visible to the user, by default.
That is, upon adding a new item, I would like to programmatically scroll down to the bottom edge of the container so that the vertical scrollbar will be in the bottom position.
What is the preferred method of accomplishing this
1) when using a Wt::WContainerWidget with overflow set to Wt::WContainerWidget::OverflowAuto
2) when using a Wt::WContainerWidget wrapped inside a Wt::WScrollArea?
Note: I do not know the pixel dimensions of the scrolled container. The added items/widgets are of arbitrary size (determined by CSS styling and the browser's internal style sheet), and the scrolled container simply grows and shrinks according to its contents. (Is there a Wt-sanctioned way to query the actual pixel dimensions of a container from the browser?)
Replies (6)
RE: Moving scrollbar to the bottom position (in a scrollable container) - Added by Wim Dumon almost 10 years ago
Hello,
(1) is the way to go.
To scroll the container, you'll need to make a JavaScript call when you add an element. This can be fairly simple (the method comes for a quick google search, but you should get the idea):
void myContainer::addData()
{
/// ... add data here ...
doJavaScript(jsRef() + ".scrollTop = "+ jsRef() + ".scrollHeight;");
Best regards,
Wim.
RE: Moving scrollbar to the bottom position (in a scrollable container) - Added by Jukka Aho almost 10 years ago
Wim Dumon wrote:
To scroll the container, you'll need to make a JavaScript call when you add an element. [...]
>
doJavaScript(jsRef() + ".scrollTop = "+ jsRef() + ".scrollHeight;");
Ah. That was the key.
I expected there to be a way to do this without resorting to ad hoc JavaScript code and just thought maybe I'm missing some more obvious method.
Thank you!
RE: Moving scrollbar to the bottom position (in a scrollable container) - Added by Ansif Ibrahimkutty almost 10 years ago
Adding few more lines here,
WContainerWidget *widget = new WContainerWidget; //Here the widget will move to the bottom side.
Widget ->setOverflow(Wt::WContainerWidget::OverflowAuto); //This will enable scroll bar feature to the widget
doJavaScript(widget->jsRef() + ".scrollTop = " + widget->jsRef() + ".scrollHeight;");
.
RE: Moving scrollbar to the bottom position (in a scrollable container) - Added by John Robertson over 5 years ago
I cannot get this example to work, and in my case the update is server initiated via triggerUpdate(). Will this work with triggerUpdate()?
RE: Moving scrollbar to the bottom position (in a scrollable container) - Added by John Robertson over 5 years ago
After some sleuthing I figured out that the scrollbar I am trying to control is associated with the 'html' element in the DOM tree. I don't understand why this is the case, as my document is simply some WText objects added via root()->addItem(), and root() is not the 'html' element! Anyway, this javaScript incantation did the trick for me:
doJavaScript("document.getElementsByTagName('html')[0].scrollTop = document.getElementsByTagName('html')[0].scrollHeight;");
I have no idea if this is very portable, but it worked for Chromium and Firefox.
RE: Moving scrollbar to the bottom position (in a scrollable container) - Added by Stefan Bn about 5 years ago
Just in case anyone needs it:
The before mentioned didn't work for me (using Wt 4.3.1) but this works:
doJavaScript(wtWidget->jsRef() + ".scrollIntoView();");