Python Tkinter Tutorial | How to Create a Custom Scrollbar Widget Part 2

In this video, we continue working on our custom scrollbar by adding the scrollbar's thumb in Python Tkinter.

Want the Complete Scrollbar Code?

Want a More Advanced Scrollbar?

TIMESTAMPS
00:00 Intro
00:06 Creating the Scrollbar's Thumb
07:46 Testing the Scrollbar

[CodeQuest]

FINAL CODE (scrollbar.py)

from tkinter import Canvas

class Scrollbar(Canvas):
def __init__(self, parent, orient="vertical", **kwargs):
self.options = {
"bg":
"thickness": 12,
"thumb_color":
"thumb_hover_color":
}


self.orient = orient
self.thumb_size = 30
self.fraction = 0
self.start_drag_pos = 0
self.dragging = False
self.hovering = False

if orient == "vertical":
size_args = {"width": self.options["thickness"]}

else:
size_args = {"height": self.options["thickness"]}

super().__init__(
parent,
bg= self.options["bg"],
highlightthickness = 0,
**size_args,
)

self.bind("<Configure>", lambda e:self.redraw())

def config(self, **kwargs):


if "bg" in kwargs:


if "thickness" in kwargs:
if self.orient == "vertical":


else:


def redraw(self):
self.delete("thumb")

size = self.winfo_height() if self.orient == "vertical" else self.winfo_width()
max_pos = max(size - self.thumb_size, 1)
pos = self.fraction * max_pos

if self.orient == "vertical":
self.create_rectangle(
0, pos,
self.winfo_width(), pos + self.thumb_size,
fill = if self.hovering or self.dragging else self.options["thumb_color"],
outline="",
tags="thumb",
)

else:
self.create_rectangle(
pos, 0,
pos + self.thumb_size, self.winfo_height(),
fill = if self.hovering or self.dragging else self.options["thumb_color"],
outline="",
tags="thumb",
)

self.tag_bind("thumb", "<Enter>", self.on_thumb_hover)
self.tag_bind("thumb", "<Leave>", self.on_thumb_leave)

def on_thumb_hover(self, event=None):
self.hovering = True
self.itemconfig("thumb", fill=self.options.get("thumb_hover_color",

def on_thumb_leave(self, event=None):
self.hovering = False

if not self.dragging:
self.itemconfig("thumb", fill=self.options.get("thumb_color",