How can I hide the scrollbar on AnkiDroid?

Anki Card Design
1

I wish to hide the scrollbar while still allowing scrolling if necessary. On Anki, I can hide the scrollbar with the following code:

body::-webkit-scrollbar {
	display: none;
}

However, this doesn’t work on AnkiDroid. I also tried

body::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

The scrollbar is still visible, though, and happily doing it’s thing when I’m scrolling.

I read that the scrollbar might be outside of CSS’s control – maybe someone here knows more whether it’s possible or not (and how to do it in case it is possible)?

Thanks!

2

The fact that the scrollbar is not showing when a card is inspected with dev tools probably indicates that it indeed is not a part of the webview and is not accessible from CSS directly.

Although, using something like

:root {
    overflow: hidden;
}
body {
    border-bottom: 1px transparent solid;
    height: 100vh;
}

seems to prevent the bar from appearing

3

I cannot use this though as this disables scrolling as well. Especially on AnkiDroid, I have cards that need to be scrollable in order to view all info on them (because of lists, pictures, additional info, ect.).

That’s unfortunate. Thanks for the clarification though.

4

It should not. At least, in my tests cards remain scrollable.
The idea was to make the body of a card act as a scrollable container for the rest of the elements, instead of scrolling the card as an entire document in the AnkiDroid window to avoid exterior scrollers.

1 Like
5

Odd. My cards stopped scrolling as soon as I entered the code you provided.

I don’t think I’ve got anything that interferes with scrolling on my cards, but I’ll have to check with a default basic card.

6

I guess that depends on how the sizes of other elements on the cards are calculated. Some adjustments might be in order.
But the overflow: hidden on the root element should not prevent scrolling by itself, because the body – its direct child – is set up to fit the size of the screen, so there should be no overflow happening at this level. Maybe explicitly setting

body {
    overflow-y: auto;
}

can help

7

Maybe steps to reproduce can help:

Steps to reproduce

  1. Create a new default Basic type.
  2. Add the following css:
.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

:root {
    overflow: hidden;
}
body {
    border-bottom: 1px transparent solid;
    height: 100vh;
    overflow-y: auto;
}
  1. Enter a random string into Front, like This is a question..
  2. Enter something unreasonably long into Back, to emphesize the issue. E.g.
<ol><li>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long answer.</li><li>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long answer.</li><li>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long answer.</li><li>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long answer.</li><li>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long answer.</li><li>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long answer.</li><li>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long answer.</li><li>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long answer.</li><li>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long answer.</li><li>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long answer.</li><li>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long answer.</li></ol>
  1. View the card.

Result

  1. Anki auto scrolls to the hr element. I cannot scroll anymore to view the question with the css above.
  2. If I make the window smaller, a scrollbar appears and I can indeed scroll vertically. But issue #1 is still there.
  3. Without overflow-y: auto; there is no scrollbar like in #2 and scrolling doesn’t work either.
8

That’s weird. When I reproduced the test card, the scrolling worked just fine (AnkiDroid 2.20.1).

On the other hand, border-bottom turned out to only work when set with dev tools and not when placed on the card itself, but using full border property instead still did the trick:

1 Like
9

Sorry, I didn’t test it on AnkiDroid yet. The issues I was talking about happend on Anki (24.11, 87ccd24e).

As I need to be able to scroll there as well, I tested it on Anki first (e.g. images are displayed much larger than on AnkiDroid and thus need more space).

And since it didn’t work there I didn’t try it on AnkiDroid. I can test it tomorrow. If it works on AnkiDroid for me too, the issue on Anki would need to be resolved though.

10

Any CSS can be easily made specific to a certain platform by using respective root classes (.android for AnkiDroid), which is why I would focus on making it work on the target platform first, and do all the other accosiated adjustements later. However, I don’t experience any problems with scrolling on the desktop app either (25.02.4, a5c33ad0) for some reason. Maybe it’s an OS thing?

1 Like
11

I just tested it with Anki 25.05 (8fc822a6) (src) (ao) and it does work here without issues. The build runs in a vm with debian unstable (basically the latest version meant for testing). So it might either be the newer anki version or the newer OS version.

I tested the code

:root {
    overflow: hidden;
}
body {
    border-bottom: 1px transparent solid;
    height: 100vh;
    overflow-y: auto;
}

on AnkiDroid just now. It blocks the scrolling there as well (just like on my debian stable with Anki 24.11) and the scrollbars are still visible.

I cannot upgrade my webview though, as my Android device is EOL and over 6 years old (My Android System Webview is on version 103.0.5060.71).

12

I suppose it is the issue. Not that my device is much newer, but it runs v135, atm.

The original idea of making a scrollable container out of a certain card element instead of scrolling the card as a whole might still work. Although considering how fiddly all of this is, it will probably require quite a lot of trial-and-error to find the right combination of CSS rules that will amount to the right effect on a particular system.

I am still puzzled by the scrolling getting disabled, though, because it should not happen in theory with the given css, and I also can’t reproduce it anywhere (just tried in 24.11 (87ccd24e) on win11, and it still worked as expected)⁩. All the properties involved are very old and well-established as well, it’s unusual to see them acting differently depending on a system. A careful inspection of how the sizes of each element are determined, and what their resulting scrolling properties are, might reveal something, but it won’t be easy either.

1 Like
13

I think I’ll just ignore the scrollbars on AnkiDroid, then.

Thank you for your thorough help Eltaurus!

1 Like
14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.