如何正确绑定左右Canvas滚动条与鼠标滚轮事件？

问题原因 #

你代码里的核心问题是使用了bind_all()方法绑定鼠标滚轮事件——这个方法会把事件绑定到整个应用程序的所有组件，而非指定的单个区域。当你先给左侧绑定、再给右侧绑定的时候，右侧的绑定会覆盖左侧的，导致无论鼠标在哪个区域，都会触发右侧的滚动逻辑。

另外，左侧的update_left_scrollbar()函数是多余的，因为你已经给left_canvas设置了yscrollcommand=left_scrollbar.set，canvas滚动时会自动同步滚动条的位置。

修复方案 #

把两处bind_all()替换成bind()，分别绑定到各自的canvas组件上，这样只有当鼠标在对应canvas区域内滚动时，才会触发对应的滚动逻辑：

修复后的完整代码 #

import tkinter as tk
from tkinter import ttk
import pandas as pd
import random

# Sample DataFrame
df = pd.DataFrame({
    'ID': [1, 2, 3, 4, 5],
    'Data': [10, 15, 7, 12, 9]
})

def create_radial_chart(frame):
    # Function to create a random radial chart
    # Replace this with your own radial chart creation code
    # For demonstration purposes, we'll just create a random number of labels
    num_labels = random.randint(1, 80)
    labels = [f'Label {i}' for i in range(1, num_labels + 1)]
    radial_chart = ttk.Label(frame, text='\n'.join(labels))
    radial_chart.pack()

def on_left_canvas_scroll(event):
    left_canvas.yview_scroll(int(-1 * (event.delta / 120)), "units")

# Create the main window
root = tk.Tk()
root.title('Tkinter Layout Example')

# Create the dropdown menu
dropdown_var = tk.StringVar(root)
dropdown = ttk.Combobox(root, textvariable=dropdown_var)
dropdown['values'] = df['ID'].unique()
dropdown.pack()

# Create the main frames
main_frame = ttk.Frame(root)
main_frame.pack(fill=tk.BOTH, expand=True, padx=10, pady=10)

# Create the left frame with a scrollbar
left_frame = ttk.Frame(main_frame)
left_frame.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

left_scrollbar = ttk.Scrollbar(left_frame, orient=tk.VERTICAL)
left_scrollbar.pack(side=tk.RIGHT, fill=tk.Y)

left_canvas = tk.Canvas(left_frame, yscrollcommand=left_scrollbar.set)
left_canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

left_scrollbar.config(command=left_canvas.yview)

# Bind scroll wheel event to the left canvas
left_frame_content = ttk.Frame(left_canvas)
left_canvas.create_window((0, 0), window=left_frame_content, anchor='nw')
left_canvas.bind("<MouseWheel>", on_left_canvas_scroll)

# Create the radial charts in the left frame
for _ in range(5):
    create_radial_chart(left_frame_content)

# Configure the scrollable region for the left canvas
left_frame_content.update_idletasks()
left_canvas.config(scrollregion=left_canvas.bbox("all"))

# Create the right frame with a scrollbar
right_frame = ttk.Frame(main_frame)
right_frame.pack(side=tk.RIGHT, fill=tk.BOTH, expand=True)

right_scrollbar = ttk.Scrollbar(right_frame, orient=tk.VERTICAL)
right_scrollbar.pack(side=tk.RIGHT, fill=tk.Y)

right_canvas = tk.Canvas(right_frame, yscrollcommand=right_scrollbar.set)
right_canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

right_scrollbar.config(command=right_canvas.yview)

# Bind scroll wheel event to the right canvas
right_canvas.bind("<MouseWheel>", lambda event: right_canvas.yview_scroll(int(-1 * (event.delta / 120)), "units"))

# Create the middle frames
middle_frame = ttk.Frame(main_frame)
middle_frame.pack(side=tk.LEFT, fill=tk.BOTH, expand=True, padx=10)

upper_middle_frame = ttk.Frame(middle_frame)
upper_middle_frame.pack(fill=tk.BOTH, expand=True)

lower_middle_frame = ttk.Frame(middle_frame)
lower_middle_frame.pack(fill=tk.BOTH, expand=True)

# Create the line plot in the upper middle frame
# Replace this with your own line plot creation code
line_plot = ttk.Label(upper_middle_frame, text='Line Plot')
line_plot.pack()

# Create the data table in the lower middle frame
# Replace this with your own data table creation code
data_table = ttk.Label(lower_middle_frame, text='Data Table')
data_table.pack()

# Create the radial charts in the right frame
right_frame_content = ttk.Frame(right_canvas)
right_canvas.create_window((0, 0), window=right_frame_content, anchor='nw')

for _ in range(5):
    create_radial_chart(right_frame_content)

# Configure the scrollable region for the right canvas
right_frame_content.update_idletasks()
right_canvas.config(scrollregion=right_canvas.bbox("all"))

root.mainloop()

额外兼容说明 #

如果程序需要兼容MacOS，Mac的鼠标滚轮事件是<Button-4>（向上滚）和<Button-5>（向下滚），可以添加一个兼容处理函数：

def handle_scroll(event, canvas):
    if event.num == 4:
        canvas.yview_scroll(-1, "units")
    elif event.num == 5:
        canvas.yview_scroll(1, "units")
    else:
        canvas.yview_scroll(int(-1 * (event.delta / 120)), "units")

然后绑定的时候改成：

left_canvas.bind("<MouseWheel>", lambda e: handle_scroll(e, left_canvas))
left_canvas.bind("<Button-4>", lambda e: handle_scroll(e, left_canvas))
left_canvas.bind("<Button-5>", lambda e: handle_scroll(e, left_canvas))

right_canvas.bind("<MouseWheel>", lambda e: handle_scroll(e, right_canvas))
right_canvas.bind("<Button-4>", lambda e: handle_scroll(e, right_canvas))
right_canvas.bind("<Button-5>", lambda e: handle_scroll(e, right_canvas))

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