How to keep the front side fixed and only scroll the back content in review mode?

Anki Card Design
1

Hi, I’m trying to improve the usability of some of my Anki cards.

Some of my cards have a very long back, including definitions, example sentences, and multiple images. When I answer a card during review, I have to scroll through a long block of content. The problem is that when I scroll, the front part (the question/prompt) also scrolls off the screen. I want to make it so the front stays visible at the top, and only the back content scrolls.

What I want:

  • Keep the front field (question) pinned at the top
  • Allow scrolling only for the back content after revealing the answer
  • Preserve center alignment and compatibility with dark mode

This is on Anki Desktop, latest version.
Any help or working template would be much appreciated!

Thanks in advance :folded_hands:

2

The easiest way is to use position: sticky;, I tried this:

.question {
 position: sticky;
 top: 0;
 backdrop-filter: blur(20px);
}

And then this on back side:

<div class="question">{{Front}}<hr /> </div>

The blur is there so content below the question gets blurred (the other methods were a bit too complicated).

In case you have some long questions, you might also want to set a max height for the sticky element.

3 Likes