A simple scrollable frame class for tkinter, including example usage.

tk_scroll_demo.py

# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at https://mozilla.org/MPL/2.0/.

import tkinter as tk
import platform

# ************************
# Scrollable Frame Class
# ************************
class ScrollFrame(tk.Frame):
    def __init__(self, parent):
        super().__init__(parent) # create a frame (self)

        self.canvas = tk.Canvas(self, borderwidth=0, background="#ffffff")          #place canvas on self
        self.viewPort = tk.Frame(self.canvas, background="#ffffff")                    #place a frame on the canvas, this frame will hold the child widgets 
        self.vsb = tk.Scrollbar(self, orient="vertical", command=self.canvas.yview) #place a scrollbar on self 
        self.canvas.configure(yscrollcommand=self.vsb.set)                          #attach scrollbar action to scroll of canvas

        self.vsb.pack(side="right", fill="y")                                       #pack scrollbar to right of self
        self.canvas.pack(side="left", fill="both", expand=True)                     #pack canvas to left of self and expand to fil
        self.canvas_window = self.canvas.create_window((4,4), window=self.viewPort, anchor="nw",            #add view port frame to canvas
                                  tags="self.viewPort")

        self.viewPort.bind("<Configure>", self.onFrameConfigure)                       #bind an event whenever the size of the viewPort frame changes.
        self.canvas.bind("<Configure>", self.onCanvasConfigure)                       #bind an event whenever the size of the canvas frame changes.
            
        self.viewPort.bind('<Enter>', self.onEnter)                                 # bind wheel events when the cursor enters the control
        self.viewPort.bind('<Leave>', self.onLeave)                                 # unbind wheel events when the cursorl leaves the control

        self.onFrameConfigure(None)                                                 #perform an initial stretch on render, otherwise the scroll region has a tiny border until the first resize

    def onFrameConfigure(self, event):                                              
        '''Reset the scroll region to encompass the inner frame'''
        self.canvas.configure(scrollregion=self.canvas.bbox("all"))                 #whenever the size of the frame changes, alter the scroll region respectively.

    def onCanvasConfigure(self, event):
        '''Reset the canvas window to encompass inner frame when required'''
        canvas_width = event.width
        self.canvas.itemconfig(self.canvas_window, width = canvas_width)            #whenever the size of the canvas changes alter the window region respectively.

    def onMouseWheel(self, event):                                                  # cross platform scroll wheel event
        if platform.system() == 'Windows':
            self.canvas.yview_scroll(int(-1* (event.delta/120)), "units")
        elif platform.system() == 'Darwin':
            self.canvas.yview_scroll(int(-1 * event.delta), "units")
        else:
            if event.num == 4:
                self.canvas.yview_scroll( -1, "units" )
            elif event.num == 5:
                self.canvas.yview_scroll( 1, "units" )
    
    def onEnter(self, event):                                                       # bind wheel events when the cursor enters the control
        if platform.system() == 'Linux':
            self.canvas.bind_all("<Button-4>", self.onMouseWheel)
            self.canvas.bind_all("<Button-5>", self.onMouseWheel)
        else:
            self.canvas.bind_all("<MouseWheel>", self.onMouseWheel)

    def onLeave(self, event):                                                       # unbind wheel events when the cursorl leaves the control
        if platform.system() == 'Linux':
            self.canvas.unbind_all("<Button-4>")
            self.canvas.unbind_all("<Button-5>")
        else:
            self.canvas.unbind_all("<MouseWheel>")



# ********************************
# Example usage of the above class
# ********************************

class Example(tk.Frame):
    def __init__(self, root):

        tk.Frame.__init__(self, root)
        self.scrollFrame = ScrollFrame(self) # add a new scrollable frame.
        
        # Now add some controls to the scrollframe. 
        # NOTE: the child controls are added to the view port (scrollFrame.viewPort, NOT scrollframe itself)
        for row in range(100):
            a = row
            tk.Label(self.scrollFrame.viewPort, text="%s" % row, width=3, borderwidth="1", 
                     relief="solid").grid(row=row, column=0)
            t="this is the second column for row %s" %row
            tk.Button(self.scrollFrame.viewPort, text=t, command=lambda x=a: self.printMsg("Hello " + str(x))).grid(row=row, column=1)

        # when packing the scrollframe, we pack scrollFrame itself (NOT the viewPort)
        self.scrollFrame.pack(side="top", fill="both", expand=True)
    
    def printMsg(self, msg):
        print(msg)

if __name__ == "__main__":
    root=tk.Tk()
    Example(root).pack(side="top", fill="both", expand=True)
    root.mainloop()

I really have no idea what the reason could be. I just replaced 100 with 8, ran the program and scrolled up.
When I make the window large the effect disappears. But if you press any of the buttons and scroll, the effect appears again.
I use python 3.10.8 on Windows 10

video.mp4

Excellent video @Anenokil ! I think we may have different expectations of the preferred behavior. What I am seeing there is how I would expect the frame to behave. If I understand you correctly, you prefer scrolling to be disabled when the content is smaller than the viewport?

I get it, thanks @mp035. Indeed, we had different expectations.

To follow up on @Anenokil 's comment - my expectation was also that the frame would only scroll if items overflowed the frame vertically. I tried the solution proposed above but it did not work for me on Fedora Linux. What did work is the following:

def onMouseWheel(self, event: tk.Event):  # cross platform scroll wheel event
    canvas_height = self.canvas.winfo_height()
    rows_height = self.canvas.bbox("all")[3]

    if rows_height > canvas_height: # only scroll if the rows overflow the frame
        if platform.system() == 'Windows':
            self.canvas.yview_scroll(int(-1* (event.delta/120)), "units")
        elif platform.system() == 'Darwin':
            self.canvas.yview_scroll(int(-1 * event.delta), "units")
        else:
            if event.num == 4:
                self.canvas.yview_scroll( -1, "units" )
            elif event.num == 5:
                self.canvas.yview_scroll( 1, "units" )

Hope this helps someone in the future!

I just learned something which may help someone having problems with the width of the ScrollFrame. Apologies if I misuse some technical tkinter terms. I'm new to this and it took hours just to figure out the seven levels of nested widgets that make this work (root, Example, scrollFrame, canvas and vsb, viewPort and canvas_window, and then the Labels and Buttons).

My application has a grid with one row and 3 columns. The middle column contains a ScrollFrame, and it was coming out much wider than the widgets it contained. Those widgets were simply a column of buttons about 170 pixels wide.

Then I ran the built-in Example and found the same problem. The displayed window would have the labels and buttons, and then a lot of wasted space to the right. It is possible to squeeze this space away by guessing and specifying a window width, but that seemed wrong. In the screenshot I turned the viewPort background yellow to make this more visible.

Normally widgets are a tight fit in their containers unless otherwise specified, but not in this case. You have to use something like
self.scrollFrame.canvas.configure(width=maxW) where maxW is the width of your contained widgets.

To show this in the provided code I built lists of the labels and buttons as they were built, because their width isn't available until later. Then after the items are created and pack is called at line 89 I added this:

        self.scrollFrame.update()  # trigger sizing!  Only now are button and label sizes valid.
        maxW = 0;
        for row in range(21):
            maxW = max(maxW, labList[row].winfo_width() + bList[row].winfo_width())
        self.scrollFrame.canvas.configure(width=maxW) # works!

It would have been enough to check just the last row in this case, but this seems more flexible. It's simpler in my application because I know the exact width of the buttons in advance. There may be a need to adjust the resulting value a little if there is padding or some other reason that more space is needed.

In case it matters I'm running Python 3.10.9 in Spyder 5.4.2 on Windows 11.

This is really solid. Have you ever considered adding this to PIP? I don't mind doing it if you would like.

Thanks. It's just a single file, so I don't really see the need to package it. It's open source, so you're free to do whatever you want with it, but can I please ask that you credit, or provide a link to this gist. Have a great day.