Scroll Into View JavaScript Trigger Not Working

Feb 22, 2024

Ray DeRegis
By Ray DeRegis

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????

14 Replies
Ray DeRegis
2 months ago02/22/24 at 4:09 pm (UTC)

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.

Steve Gannon
2 months ago02/22/24 at 4:21 pm (UTC)

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.

Ray DeRegis
2 months ago02/22/24 at 7:04 pm (UTC)

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.

Ray DeRegis
2 months ago02/22/24 at 7:10 pm (UTC)

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.

 

Steve Gannon
2 months ago02/22/24 at 7:36 pm (UTC)

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.

Nathanial Hilliard
2 months ago02/23/24 at 4:01 am (UTC)

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

Sam Hill
2 months ago02/23/24 at 4:40 am (UTC)

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

Sam Hill
2 months ago02/23/24 at 4:57 am (UTC)

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);
Sign In to Reply