Show Scrolling panel at the end

Question

Hi Heroes,I used to use a code for showing the scrolling panel at the end when the timeline starts. It worked perfectly before. However, it doesn't work anymore, even when I republish the original file without changing anything. Does anyone have an idea?let scrollbar = document.getElementsByClassName("scrollarea-area")scrollbar[0].scrollTop = 9999999

nathan_hilliard · Answer

Joanne, your code seems to work when I test it. I did essentially the same thing as an example for someone recently (attached). Are you getting an error in the console? Is the scroll panel not ready in the DOM when you are trying to find it? Maybe you could try adding a setTimeout() delay to see if it is a timing issue.

joannechen · Answer

Hi Nathan,&nbsp;Thanks for replying and testing my code. I did check the console and got no error message. What I did wrong was that I didn't test the code alone in a new slide. Instead, I just opened my previous project (the one that worked) and reviewed it, thinking the code didn't work anymore. So thank you for confirming the code works. I found the issue was caused by the text format. I accidentally set the text to a fixed size. When I set it to expand height, it fixed the issue. Additionally, in my previous project, I had a group in the scrolling panel, not text. The reason it didn't work was because the scroll panel wasn't ready in the DOM. When I added a timeout, it worked. I was very frustrated yesterday while troubleshooting this issue. Thankfully, I got it fixed. Hope sharing this experience could help someone avoid the same frustration I had.

thierryemmanuel · Answer

Hello Nathan_Hilliard . I was very interested in the little file and code you generously share. If I understand correctly (by studying how the code works by targeting the position of a text tag by its acc-text), I just need to change in the first trigger “Begining” by another acc-text of one of the 3 other text tags arranged in the scroll panel (for example: End). I run the Preview and... nothing. Still on the “Begining” position. I skip the numerous attempts to change the default accessible texts, but still nothing. And I get an error message from the console: Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state (which means absolutely nothing to me 😅). &nbsp;What did I miss that&nbsp; works well for you? &nbsp;Please. Thank you in advance.

nathan_hilliard · Answer

Hi Thierry. Sorry, this example is a bit confusing as a starting point for what you are asking.Normally, objects on the SL slide are tagged with a&nbsp;data-acc-text attribute that matches what you find if you right-click on the entry in the timeline and select Accesibility. In these cases, yes, you can use JavaScript and the document.querySelector() function to locate objects from your slide (often the top level &lt;div&gt; that contains the object).Some objects, like the scroll panel, do not update this tag so you can't find them this way. There are other options, but they often rely on tag or class names which could possibly change in the future. One way is to use the&nbsp;data-acc-text attribute to locate the first object inside the scroll panel (which happens to be the text "Begining"). We then use the .parentNode method to go up two levels to obtain the actual &lt;div&gt; that corresponds to the scroll panel.When you tried to select the other text entries and applied .parentNode.parentNode, you were just getting the same scroll panel &lt;div&gt; as the result since those text boxes are all at the same level in the hierarchy.The Warning message you noted is just something that is generated by SL occasionally and doesn't really have anything to do with the script or something you were doing wrong.The scroll panel is actually being postioned by setting a variable to a value between 0 and 1, representing a fraction of the maximum scrollable height. As the dial turns, the value increases or decreases. The script calculates where the scroll handle should be positioned (in pixels) based upon the current size of the panel and what proportion of scrolling you specified with the dial.

thierryemmanuel · Answer

Don't apologize, Nathan_Hilliard , and thank you so much for taking the time to respond and explain to a non-coder like me.&nbsp;First of all, I hadn't commented on the dial / scroll panel part, as it works PERFECTLY.In fact, I had looked for the text tags in the console and couldn't find them outside the panel itself. Which is consistent with what you're explaining. I know that it's possible to target elements by data-acc-text and how to create/modify the acc text of an element. As for the rest (the .parentNode method), I'm a bit lost, but that's okay: I'll just have to study some simpler code. My voyage of discovery through JS has just begun.Thanks again for your help.