What function is used to move the viewport to the top of an element when it expands?
I have multiple boxes set up to have only one expanded at a time--currently expanded box collapses when one of the other closed boxes is expanded.
The problem in mobile is that when a box lower down the scroll is expanded, a box higher up the scroll collapses (pulling up all elements below it) and that results in the viewport not being at the top of the newly expanded box content--the user must scroll back up to see the content in the newly expanded box.
So I thought perhaps a command could be added to the expand onClick event to move the viewport to the top of the expanded element.
Hope this makes sense. How is this handled?
Thanks!
One way to do it is to add an anchor just above the top of the first box (the box on the top).
Then you do:
Promise.all([$w("#box1").collapse(), $w("#box2").expand()]) .then(() => $w("#anchor1").scrollTo());
@J. D. -- thanks again for your recommendation. The scrollTo is now working consistently--I assume the problem was timing of the collapse/expand events and the Promise.all took care of that by including them all and then doing the scrollTo as you said. I was happy that the $w('#tab').scrollTo() worked and I didn't need to work with additional anchors.
Thank you for such a quick response! I found the scrollto() function (in the Wix elements command set under HiddenCollapsedElement) and tried the code below. It works but then it doesn't. Instead of this series of commands, do I instead use your grammar to put all the collapse and expand commands in one Promise.all? I can't scrollto() the element, rather than an anchor?
export function tab3_click(event) {
$w('#tab2').changeState("tab2enabled");
$w('#tab1display').collapse();
$w('#tab2display').collapse();
$w('#tab3display').expand();
$w('#tab3').changeState("tab3open");
$w('#tab1').changeState("tab1enabled");
$w('#tab3').scrollTo();
}