Forum Discussion
Scroll Into View JavaScript Trigger Not Working
Wondering if anyone has figured out a way to scroll to a specific line in a Storyline scrolling panel?
I have tried the following JS trigger:
var zoneone = document.querySelectorAll(‘[data-acc-text~=”modone”]’);
zoneone[0].scrollIntoView({block: “end”, inline: “nearest”});
...where "modone" is the accessibility name given to the shape located on the target line I wish to scroll to.
Thinking it must be possible????
Thought I'd share how the script is working as intended (note, only the first two links on the left have been programmed properly): https://360.articulate.com/review/content/ea9f84b6-8784-4ff8-9db8-47b3c667abb1/review
Not sure if it's just a formatting issue here in the forum but it appears you have a tilde (~) before "modone" and the initial quotation mark before modone is backward.
Good eye Steve. I changed the opening quotation mark.
I'm unsure of what to do about tilde. I tried replacing it with nothing and
also tried a dash. Neither made a difference.var zoneone = document.querySelectorAll(‘[data-acc-text~=“modone”]’);
zoneone[0].scrollIntoView({block: “end”, inline: “nearest”});I'm thinking this script is fairly common... it has me scratching my head.
You can try copying/pasting the code below:
var zoneone = document.querySelectorAll('[data-acc-text="modone"]');
zoneone[0].scrollIntoView({block: "end", inline: "nearest"});Also, you may need to place your published output on a web server to test it. I'm not sure if this works when running the published output from the local drive.
Thank you Steve. I replaced the js and while the outcome wasn't as expected....there was scrolling movement. It scrolled to bottom of the scrolling panel. Here is the link: https://360.articulate.com/review/content/3e4380ce-560b-4190-b30e-6cfbb4bf93f6/review
Note: You will need to scroll down quite a bit to click the blue button. The expected behavior is for the scroll to move upwards to the description for ERP module one.
Also, If you're still with me, Steve! :) I moved the button up near the top of the scrolling panel in this published version: https://360.articulate.com/review/content/7660010d-0ac2-4923-8d07-de3db9006581/review
When I clicked the blue button, it scrolled downward such that the blue button was at the very top.
Hey Ray,
If you can upload the latest version of the .story file, I'll dig into it to see what I can discover. You're absolutely certain you don't have any other objects in the scrolling panel with alt-text containing "modone", right?
If you don't want to upload the file here, you can send me a private message with a link.
Uploading the .story file. My suspicion is the parameter "nearest" is the culprit.
Hi Ray,
I tested this by running the script directly in the browser console. I adjusted your script a little, as it was not necassary to querySelectorAll as you are only grabbing a single element, so it is better to use querySelector and return the single element you want to use.
// querySelector as we're only looking for a single element
var zoneone = document.querySelector('[data-acc-text="modone"]');
// passing the arg false (shorthand)
zoneone.scrollIntoView(false);Now, the results, they are good in the browser console and work perfectly, scrolling the element into view at the bottom of the panel as expected. However, adding the same script to SL and triggering via the button, scrolls the content, but doesn't bring the element into view. It's short by several pixels and I'm not sure why this would be, and why there would be a difference between running via SL and running in the browser console.
Anyway, thought I'd just share that script with you, as it inches you a bit closer to a solution.
I'll see if I can find why this occurs.
Cheers,
Sam
At first glance, Ray, this should be working. I'm going to study it a bit more in the morning and I'll let you know if I uncover the culprit. I'm sure it's just some little nit we're overlooking.
Note that if the button is placed outside the scroll panel, things work like you desire. Don't really know why. If you hide the button between clicking and scrolling, then this works as you wanted. To unhide the button, you need to delay long enough that the scroll is completed before the button reappears, otherwise it still just jumps to the button top.
I hacked a mod into your file, and delayed the button return for 1 second. I am sure there is a more elegant solution, but at least it seems to do what you wanted.
https://360.articulate.com/review/content/8b786e59-99d2-42f1-abe0-02cce1bcbfde/review
Hi Ray, ok, I found a solution. It doesn't make a great deal of sense to me, but adding a slight delay (1/10th of a second) corrects the issue and brings the element into view:
var zoneone = document.querySelector('[data-acc-text="modone"]');
setTimeout(function()
{
zoneone.scrollIntoView(false);
},100);
