Scrollbar fill on scrolling page

georgeb
georgeb Community Member Posts: 43
Hi, I saw this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_indicator

And I tried to make it work in Lectora, but somehow the script won't run when I have it either in meta tags <script> tages, in the header scripting nor in the bottom of file scripting.

Anyone has a sollution for this?

(I used custom div for the scrollbar with the html code for the progress container and bar, but if there's a sollution with the Lectora progress bar that's also fine for me.

Comments

  • timk
    timk Community Member Posts: 1,197 ♦ Idol ♦
    Adding the event listener to the window should happen in a Run javascript action or another type of trigger. Otherwise the code won't be executed.
  • georgeb
    georgeb Community Member Posts: 43
    Fantastic, thanks!
  • georgeb
    georgeb Community Member Posts: 43
    Seems it only works if I don't load jQuery via a html extension.

    I have a little code that scrolls to the top (we use long pages):

    function STT() {
    $('html, body').animate({scrollTop: $('#pageDIV').offset().top -50 }, 'slow');
    }

    Now that obviously doesn't work anymore. You have any idea how comes that loading jQuery doesn't let the scrollbar code work?

    This code works for most modern browsers and is a fix for now:

    window.scroll({ top: 0, left: 0, behavior: 'smooth' });

    Wonder still though if you know a solution wiht jQuery loaded and the old code :)

     

    Kind regards,

    George
  • timk
    timk Community Member Posts: 1,197 ♦ Idol ♦
    Where did you put jQuery? I tried but I can't recreate the issue.
  • georgeb
    georgeb Community Member Posts: 43
    I saw what happened, and what fixed it.

    My code of adding jQuery was in a header scripting element, when I changed it to meta tags, everything was fine.

     

    Edit, thanks for your file, I'll look around on where to put what :)