如何设置Flexdashboard双列图表同步滚动？

默认情况下，flexdashboard的列是各自独立处理滚动的，没有原生的设置选项能直接开启双列同步滚动，不过我们可以借助一点自定义JavaScript来轻松实现这个需求。

原理说明 #

flexdashboard的每列内容都被包裹在带有.scrollable类的容器里，我们只需要监听其中一个容器的滚动事件，把滚动位置同步到另一个容器即可，双向监听就能实现不管滚动哪一列，另一列都会跟着同步滚动。

修改后的可复现代码 #

---
title: "Multiple Pages"
output: flexdashboard::flex_dashboard
---
```{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)

Page 1 =====================================

// 获取左右两个列的滚动容器
const leftColumn = document.querySelector('.column:nth-child(1) .scrollable');
const rightColumn = document.querySelector('.column:nth-child(2) .scrollable');

// 定义滚动同步函数
function syncScrollPositions(sourceContainer, targetContainer) {
  targetContainer.scrollTop = sourceContainer.scrollTop;
}

// 给两个容器添加滚动监听，实现双向同步
leftColumn.addEventListener('scroll', () => syncScrollPositions(leftColumn, rightColumn));
rightColumn.addEventListener('scroll', () => syncScrollPositions(rightColumn, leftColumn));

Column {data-width=600} #

Chart 1 (同步滚动中) #

plot(cars)
plot(iris)
plot(mtcars)
plot(airquality)

Column {data-width=400} #

Chart 2 (与Chart 1同步滚动) #

plot(cars)
plot(iris)
plot(mtcars)
plot(airquality)

### 注意事项
- 如果你的dashboard有多个页面（Page），可以给目标Page添加一个自定义类，然后修改JS选择器来精准定位当前页面的列，避免影响其他页面的布局。
- 这段JS需要放在页面内容的最前面（比如Page标题下方），确保页面元素加载完成后能正确获取到滚动容器。

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