Please help with scrolling to answer

Try to remove from the Back Template.

<script>
/* --- DO NOT DELETE OR EDIT THIS SCRIPT (409cac4f6e95b12d) --- */
...
/* --- DO NOT DELETE OR EDIT THIS SCRIPT (409cac4f6e95b12d) --- */
</script>
1 Like

Tried with no cigar, this also happens for normal cloze cards with a ton of info on the front, enough to have to scroll.

Here is the anking card type it happens with it too… Have you been able to replicate it?

To be honest, I’m not sure where is the problem with Record 2.mov.

Something really strange happens in the first second of the video when the scrollbar jumps to the top and then back to the bottom on its own, but the webpage stays as it is, and after that I don’t see anything strange.

Try to add the following code to the end of the Front Template.

<script>
    if (window.lastScrollTime == undefined) {
        window.addEventListener("scroll",function(){
            window.lastScrollTime = new Date().getTime()
        });
    }
</script>

Then remove the scrolling code from the Back Template.

<script>
  $("html").animate({ scrollTop: 0 }, "fast");
</script>

and replace it with

<script>
    function is_scrolling() {
        return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
    }

    console.log('Scrolling', is_scrolling());
    if (!is_scrolling()) {
        $("html").animate({ scrollTop: 0 }, "fast");
    }
</script>

to disable scrolling to the top if the page was scrolled recently (< 0.5 seconds) by user.

This was adapted from https://stackoverflow.com/a/52414518 and I’m not sure if it’ll make any difference.

:’( I couldnt get it to work…

Install AnkiWebView Inspector, restart Anki, right click on the page, select Inspect and open the Console tab. If it’s working, it’ll contain console.log('Scrolling', is_scrolling());

The updated template is here https://gist.github.com/kelciour/b7a4f858efcdd3899ba4507410645037

Maybe try Anki 2.1.34 (not Anki 2.1.35) - https://github.com/ankitects/anki/releases/tag/2.1.34

If I stop scrolling and press the spacebar, I don’t see any weird behaviour.

1 Like

I will try this I am on 2.1.30

Why does the edit screen pop up at 0:07?

I pressed E to refresh the screen window and show the question side again.

Okay haha I just wanted to make sure I wasnt missing anything. Just to confirm though this wont work in the actual process of scrolling. You do have to pause for a split second before flipping correct?

I did paused for a split second, but it should work in the middle of scrolling too. The page won’t be scrolled automatically to the top and you’ll need to do it manually.

If there’s no issues anymore, something like this can be added to automatically scroll to the top after user stopped scrolling.

1 Like

So I need to throw this on the back then?

If there no jumping issues anymore, it can be added, but with a few changes.

On second thought, I’m not sure how to apply it here, but something like this can be used to delay scrolling to the top.

I’m assume that the Front Template already contains

<script>
    if (window.lastScrollTime == undefined) {
        window.addEventListener("scroll",function(){
            window.lastScrollTime = new Date().getTime()
        });
    }
</script>

Replace the scrolling code in the Back Template

<script>
    function is_scrolling() {
        return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
    }

    console.log('Scrolling', is_scrolling());
    if (!is_scrolling()) {
        $("html").animate({ scrollTop: 0 }, "fast");
    }
</script>

with this version

<script>
    function is_scrolling() {
        return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
    }

    console.log('Scrolling', is_scrolling());
    if (!is_scrolling()) {
        $("html").animate({ scrollTop: 0 }, "fast");
    } else {
        var timer = setInterval(waitAndScroll, 50);

        function waitAndScroll() {
           if (!is_scrolling()) {
               console.log('Can scroll to the top');
               clearInterval(timer);
               $("html").animate({ scrollTop: 0 }, "fast");
           } else {
               console.log('Wait...');
           }
        }
    }
</script>
1 Like

THANK YOU!!! Got it to work, my only small complaint is that there is a slight delay when it is triggered during the scrolling, if there is no fix its okay I can live with it.

That’s great!

For a delay, try to change window.lastScrollTime + 500 to something smaller, but maybe not too small, maybe 200, 100 or 50 milliseconds, in

<script>
    function is_scrolling() {
        return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
    }
...

and maybe setInterval(waitAndScroll, 50); to something like setInterval(waitAndScroll, 25);

3 Likes