Tkinter Scrollbar

Summary: in this tutorial, you’ll learn about the Tkinter Scrollbar widget and how to link it to a scrollable widget.

Introduction to the Tkinter Scrollbar widget #

A scrollbar lets you view all parts of another widget whose content is typically larger than the available space.

The Tkinter Scrollbar is an independent widget, not part of other widgets such as Text and Listbox.

To use the scrollbar widget, you need to:

First, create a scrollbar widget.
Second, link the scrollbar with a scrollable widget.

The following shows how to create a scrollbar widget using the ttk.Scrollbar constructor:

ttk.Scrollbar(master=None,**kw)Code language: Python (python)

In this syntax:

master: The parent widget.
**kw: scrollbar’s options, such as orient, command, style, and so on.

For example, you can create a vertical scrollbar as follows:

v_scrollbar = ttk.Scrollbar(
    scrollable_widget, # Widget
    orient=tk.VERTICAL, # Vertical scrollbar
    command=scrollable_widget.yview # Link scrollbar to scrollable_widget widget
)Code language: PHP (php)

This example creates a vertical scrollbar for a scrollable_widget:

scrollable_widget is an instance of a scrollable widget, which can be a Text, Listbox, and Canvas.
orient specifies the orientation of the scrollbar, which can be vertical and horizontal. The orient accepts either tk.VERTICAL or tk.HORIZONTAL.

The scrollable widget also needs to communicate back to the scrollbar about the percentage of the content area currently visible.

To do it, you assign the scrollbar.set method to the yscrollcommand and/or xscrollcommand option of scrollbar:

scrollable_widget['yscrollcommand'] = scrollbar.setCode language: Python (python)

Adding a scrollbar to a Text widget #

The following program shows how to add a scrollbar to a Text widget:

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("Tkinter Scrollbar")


frame = ttk.Frame(root)
frame.pack(padx=10, pady=10, fill=tk.BOTH, expand=True)

# create a scrollbar and add it to the frame
v_scrollbar = ttk.Scrollbar(frame)
v_scrollbar.pack(side=tk.RIGHT, fill=tk.Y)

# create a text widget and add it to the frame
text = tk.Text(frame, height=8)
text.pack(side=tk.LEFT, expand=True, fill=tk.BOTH, )

# configure scrollbar
text['yscrollcommand']=v_scrollbar.set
v_scrollbar.config(command=text.yview)

# insert some text into the text widget
text.insert(tk.END, "\n" * 20)

root.mainloop()Code language: Python (python)

Output:

How it works:

First, create a frame to hold both Text and Scrollbar widgets:

frame = ttk.Frame(root)
frame.pack(padx=10, pady=10, fill=tk.BOTH, expand=True)Code language: PHP (php)

We add a padding of 10 around the frame using padx and pady:

padx=10, pady=10,

We also make the frame expansible and fill all available space:

fill=tk.BOTH, expand=TrueCode language: PHP (php)

By doing this, when we change the size of the window, the size of the frame automatically adjusts to the size of the window accordingly. This makes the frame responsive.

Next, create a vertical scrollbar and pack it on the right side (side=tk.RIGHT) of the frame:

v_scrollbar = ttk.Scrollbar(frame)
v_scrollbar.pack(side=tk.RIGHT, fill=tk.Y)

We set the fill to tk.Y to ensure that the scrollbar can fill all vertical spaces within the frame.

Then, create a Text widget and pack it on the left side (side=tk.LEFT) of the frame:

text = tk.Text(frame, height=8)
text.pack(side=tk.LEFT, expand=True, fill=tk.BOTH)Code language: PHP (php)

After that, associate the Scrollbar widget with the Text widget by assigning the v_scrollbar.set method to yscrollcommand of the Text widget and text.yview of the Text widget to the command of the Scrollbar:

text.config(yscrollcommand=v_scrollbar.set)
v_scrollbar.config(command=text.yview)

Finally, add 20 blank lines to the Text widget to make the scrollbar visible on the Text widget:

text.insert(tk.END, "\n" * 20)Code language: CSS (css)

Adding scrollbar to other widgets #

Summary #

Add a Scrollbar widget to scrollable widgets like Text widget.

Was this tutorial helpful ?