Javascript scrollIntoView not working correctly
Jun 21, 2023
Hi so I'm trying to recreate this:
https://www.youtube.com/watch?v=c_WjEe0qzUo&feature=youtu.be
I've changed the javascript to all be on one line but regardless it doesn't work correctly like it does in the video and I don't understand why. It just somewhat scrolls down not even to the objects that it supposed to.
The thing is that when I execute the script in the console while having the published file open it works correctly. Can anyone tell me why this is happening? I've attached my storyline file for reference.
Edit:
My issue ended up being that the buttons that you click cannot be in the scroll box they have to be outside/floating on top of it otherwise the script won't work properly.
4 Replies
you have to add the "names of the objects" for the search to the "Alternate Text"
document.querySelectorAll('[data-acc-text="section2"]')[0].scrollIntoView();If you scroll down further in the scroll box you'll see that there's similarly colored boxes that have the requisite "Alternate Text". The colored boxes at the top should scroll to each one of the similar color below. Otherwise the published file wouldn't have them doing anything at all rather than just slightly scrolling downwards.
Works fine for me in Chrome https://360.articulate.com/review/content/6d17472c-7ee1-4d63-b0c9-916167bf3266/review
I had to edit the code to this
var section1 = document.querySelectorAll('[data-acc-text~="section1"]');section1[0].scrollIntoView({block: "end",inline: "nearest"});
I have figured out my issue, apparently if the buttons are within the scroll box then it will not work properly. They have to be outside of it. Thank you all.