Skip to content

Scrollbar-size

The scrollbar-size rule changes the size of the scrollbars. It takes 2 integers for horizontal and vertical scrollbar size respectively.

The scrollbar dimensions may also be set individually with scrollbar-size-horizontal and scrollbar-size-vertical.

Syntax

scrollbar-size: <INTEGER> <INTEGER>;

Example

In this example we modify the size of the widget's scrollbar to be much larger than usual.

from textual.app import App
from textual.containers import Vertical
from textual.widgets import Static

TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain.
"""


class ScrollbarApp(App):
    def compose(self):
        yield Vertical(Static(TEXT * 5), classes="panel")


app = ScrollbarApp(css_path="scrollbar_size.css")
Screen {
    background: white;
    color: blue 80%;
    layout: horizontal;
}

Static {
    padding: 1 2;
    width: 200;
}

.panel {
    scrollbar-size: 10 4;
    padding: 1 2;        
}  

ScrollbarApp I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past, I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain. I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me.▂▂▂▂ And when it has gone past, I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain. I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past, I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.

CSS

/* Set horizontal scrollbar to 10, and vertical scrollbar to 4 */
Widget {
    scrollbar-size: 10 4;
}

Python

# Set horizontal scrollbar to 10, and vertical scrollbar to 4
widget.styles.horizontal_scrollbar = 10
widget.styles.vertical_scrollbar = 10