Tkinter滚动框架鼠标滚轮失效：页面1无法滚动问题排查

我用Tkinter做了支持页面切换的滚动框架，想通过鼠标滚轮实现滚动。页面2的滚动完全正常，但页面1没法用鼠标滚轮滚动——滚动条本身功能没问题，鼠标滚轮事件也触发了，就是没滚动效果。

以下是示例代码：

import tkinter as tk


class ScrollableFrame(tk.Frame):
    def __init__(self, container, *args, **kwargs):
        super().__init__(container, *args, **kwargs)
        self.canvas = tk.Canvas(self)
        scrollbar = tk.Scrollbar(self, command=self.canvas.yview)
        self.scrollable_frame = tk.Frame(self.canvas)

        self.scrollable_frame.bind(
            "<Configure>",
            lambda e: self.canvas.configure(scrollregion=self.canvas.bbox("all")),
        )
        self.scrollable_frame.bind_all("<MouseWheel>", self._on_mousewheel)

        self.canvas.create_window((0, 0), window=self.scrollable_frame, anchor="nw")

        self.canvas.configure(yscrollcommand=scrollbar.set)

        self.canvas.pack(side="left", fill="both", expand=True)
        scrollbar.pack(side="right", fill="y")

    def _on_mousewheel(self, event):
        caller = event.widget
        if "scrollableframe" in str(caller):
            if event.delta == -120:
                self.canvas.yview_scroll(2, "units")
            if event.delta == 120:
                self.canvas.yview_scroll(-2, "units")


class App(tk.Tk):
    def __init__(self):
        super().__init__()

        self.title("tkinter scrollable frame example.py")
        self.geometry("700x450")

        # set grid layout 1x2
        self.grid_rowconfigure(0, weight=1)
        self.grid_columnconfigure(1, weight=1)

        # create navigation frame
        self.navigation_frame = tk.Frame(self)
        self.navigation_frame.grid(row=0, column=0, padx=20, pady=20, sticky="nsew")

        # create navigation buttons
        self.page1_button = tk.Button(
            self.navigation_frame,
            text="Page 1",
            command=self.page1_button_event,
        )
        self.page1_button.grid(row=0, column=0, sticky="ew")

        self.page2_button = tk.Button(
            self.navigation_frame,
            text="Page 2",
            command=self.page2_button_event,
        )
        self.page2_button.grid(row=1, column=0, sticky="ew")

        # create page1 frame
        self.page1_frame = ScrollableFrame(self)
        self.page1_frame.grid_columnconfigure(0, weight=1)

        # create page1 content
        self.page1_frame_label = tk.Label(
            self.page1_frame.scrollable_frame, text="Page 1"
        )
        self.page1_frame_label.grid(row=0, column=0, padx=20, pady=10)

        for i in range(50):
            tk.Label(
                self.page1_frame.scrollable_frame, text=str("Filler number " + str(i))
            ).grid(row=i + 1, column=0)

        # create page2 frame
        self.page2_frame = ScrollableFrame(self)
        self.page2_frame.grid_columnconfigure(1, weight=1)

        # create page2 content
        self.page2_frame_label = tk.Label(
            self.page2_frame.scrollable_frame, text="Page 2"
        )
        self.page2_frame_label.grid(row=0, column=0, padx=20, pady=10)

        for i in range(50):
            tk.Label(
                self.page2_frame.scrollable_frame, text=str("Filler number " + str(i))
            ).grid(row=i + 1, column=0)

        # show default frame
        self.show_frame("page1")
        
    # show selected frame
    def show_frame(self, name):
        self.page1_button.configure(
            background=("red") if name == "page1" else "#F0F0F0"
        )
        self.page2_button.configure(
            background=("red") if name == "page2" else "#F0F0F0"
        )

        if name == "page1":
            self.page1_frame.grid(row=0, column=1, padx=0, pady=0, sticky="nsew")
        else:
            self.page1_frame.grid_forget()
        if name == "page2":
            self.page2_frame.grid(row=0, column=1, sticky="nsew")
        else:
            self.page2_frame.grid_forget()

    def page1_button_event(self):
        self.show_frame("page1")

    def page2_button_event(self):
        self.show_frame("page2")


if __name__ == "__main__":
    app = App()
    app.mainloop()

问题原因 #

你使用bind_all("<MouseWheel>", self._on_mousewheel)会给所有组件绑定全局滚轮事件，当创建第二个ScrollableFrame（page2）时，它会覆盖page1的事件绑定，导致滚轮事件只会触发page2的_on_mousewheel方法。切换到page1后，滚轮事件仍被page2的处理函数捕获，自然无法控制page1的canvas滚动。

另外，_on_mousewheel里通过"scrollableframe" in str(caller)的判断逻辑也不严谨，两个页面的滚动框架都会包含该字符串，无法精准匹配当前需要滚动的页面。

修复方案 #

1. 放弃bind_all，改用bind给当前实例的scrollable_frame和canvas分别绑定滚轮事件，确保每个页面的事件独立处理。
2. 简化滚轮事件处理逻辑，直接操作当前实例的canvas，去掉不必要的组件判断。
3. 兼容Windows和Linux的滚轮delta值差异，提升代码健壮性。

修改后的ScrollableFrame类代码：

class ScrollableFrame(tk.Frame):
    def __init__(self, container, *args, **kwargs):
        super().__init__(container, *args, **kwargs)
        self.canvas = tk.Canvas(self)
        scrollbar = tk.Scrollbar(self, command=self.canvas.yview)
        self.scrollable_frame = tk.Frame(self.canvas)

        self.scrollable_frame.bind(
            "<Configure>",
            lambda e: self.canvas.configure(scrollregion=self.canvas.bbox("all")),
        )
        # 给滚动内容框和画布分别绑定滚轮事件
        self.scrollable_frame.bind("<MouseWheel>", self._on_mousewheel)
        self.canvas.bind("<MouseWheel>", self._on_mousewheel)

        self.canvas.create_window((0, 0), window=self.scrollable_frame, anchor="nw")

        self.canvas.configure(yscrollcommand=scrollbar.set)

        self.canvas.pack(side="left", fill="both", expand=True)
        scrollbar.pack(side="right", fill="y")

    def _on_mousewheel(self, event):
        # 兼容Windows和Linux的滚轮方向差异
        delta = event.delta if event.delta else -event.num * 120
        self.canvas.yview_scroll(int(-delta/120), "units")

额外优化 #

切换页面时给当前显示的页面画布设置焦点，确保滚轮事件能被正确捕获：

def show_frame(self, name):
    self.page1_button.configure(
        background=("red") if name == "page1" else "#F0F0F0"
    )
    self.page2_button.configure(
        background=("red") if name == "page2" else "#F0F0F0"
    )

    if name == "page1":
        self.page1_frame.grid(row=0, column=1, padx=0, pady=0, sticky="nsew")
        self.page1_frame.canvas.focus_set()  # 设置焦点
    else:
        self.page1_frame.grid_forget()
    if name == "page2":
        self.page2_frame.grid(row=0, column=1, sticky="nsew")
        self.page2_frame.canvas.focus_set()  # 设置焦点
    else:
        self.page2_frame.grid_forget()

内容的提问来源于stack exchange，提问作者Chris