如何在Python Dash中实现两个滚动条同步滚动

要实现两个Dash DataTable的滚动条同步，核心思路是通过JavaScript监听表格的滚动事件，实时同步两个表格的滚动位置。具体步骤如下：

1. 为表格添加唯一ID：给两个DataTable分别设置id属性，方便JS定位元素
2. 嵌入JavaScript脚本：在布局中添加html.Script，编写滚动监听与同步逻辑

完整示例代码 #

from dash import Dash, html, dash_table
import pandas as pd
from collections import OrderedDict

app = Dash(__name__)

data = OrderedDict(
[
("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
("Humidity", [10, 20, 30, 40, 50, 60]),
("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
]
)

df = pd.DataFrame(
OrderedDict([(name, col_data * 10) for (name, col_data) in data.items()])
)

app.layout = html.Div(children= [
    dash_table.DataTable(
        id='table-1',
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],
        page_action='none',
        style_table={'height': '300px', 'overflowY': 'auto'}
    ),
    html.Br(),
    dash_table.DataTable(
        id='table-2',
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],
        page_action='none',
        style_table={'height': '300px', 'overflowY': 'auto'}
    ),
    # 添加滚动同步的JS脚本
    html.Script("""
        // 获取两个表格元素
        const table1 = document.getElementById('table-1');
        const table2 = document.getElementById('table-2');
        
        // 标记是否正在同步，避免循环触发
        let isSyncing = false;
        
        // 定义同步函数
        function syncScroll(source, target) {
            if (!isSyncing) {
                isSyncing = true;
                // 同步垂直滚动位置
                target.scrollTop = source.scrollTop;
                // 如果需要同步水平滚动，取消下面注释
                // target.scrollLeft = source.scrollLeft;
                setTimeout(() => {
                    isSyncing = false;
                }, 10);
            }
        }
        
        // 为两个表格添加滚动监听
        table1.addEventListener('scroll', () => syncScroll(table1, table2));
        table2.addEventListener('scroll', () => syncScroll(table2, table1));
    """)
])

if __name__ == '__main__':
    app.run_server(debug=True)

关键说明 #

• ID标识：给每个表格设置唯一id，确保JS能准确获取DOM元素
• 滚动同步逻辑：通过scroll事件监听滚动动作，同步目标表格的scrollTop（垂直滚动）和scrollLeft（水平滚动）
• 防循环触发：添加isSyncing标志，避免滚动同步时互相触发对方的滚动事件，造成死循环
• 可选配置：如果只需要垂直滚动联动，保留scrollTop同步即可；需要水平联动的话，取消scrollLeft的注释即可

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