解决内容宽度不同的两个ScrollViewer同步滚动问题

这个问题我之前也踩过坑——当两个ScrollViewer的内容宽度不同时，单纯用控件和内容容器的宽度比例换算偏移量，确实会因为滚动条的存在导致同步不准。核心问题在于你忽略了ScrollViewer的视口（Viewport）和内容总范围（Extent）的实际关系，滚动条本身会占用视口空间，直接影响实际可滚动的有效范围。

正确的思路应该是保持两个ScrollViewer的滚动比例一致：也就是让当前滚动的偏移量占总可滚动距离的比例完全相同，而不是生硬地按控件宽度比例换算。

具体实现步骤 #

1. 给两个ScrollViewer绑定同一个ScrollChanged事件处理方法，同时加一个标记避免循环触发（比如滚动sv1同步sv2时，会触发sv2的ScrollChanged，这时要跳过这次处理）。
2. 计算当前滚动的比例：用当前水平偏移除以总可滚动距离（内容总宽度 - 视口宽度），注意处理内容比视口小的边界情况，避免除以0。
3. 用这个比例乘以另一个ScrollViewer的总可滚动距离，得到它应该滚动的目标偏移量。

完整代码示例 #

private bool _isScrolling = false;

private void ScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
    if (_isScrolling) return;
    _isScrolling = true;

    var sourceSv = sender as ScrollViewer;
    if (sourceSv == null)
    {
        _isScrolling = false;
        return;
    }

    // 计算当前滚动的比例（处理内容未超出视口的情况）
    double scrollRatio = 0;
    double totalScrollableWidth = sourceSv.ExtentWidth - sourceSv.ViewportWidth;
    if (totalScrollableWidth > 0)
    {
        scrollRatio = e.HorizontalOffset / totalScrollableWidth;
    }

    // 同步另一个ScrollViewer的滚动位置
    if (sourceSv == sv1)
    {
        double targetOffset = scrollRatio * (sv2.ExtentWidth - sv2.ViewportWidth);
        sv2.ScrollToHorizontalOffset(targetOffset);
    }
    else if (sourceSv == sv2)
    {
        double targetOffset = scrollRatio * (sv1.ExtentWidth - sv1.ViewportWidth);
        sv1.ScrollToHorizontalOffset(targetOffset);
    }

    _isScrolling = false;
}

关键属性说明 #

• ExtentWidth：ScrollViewer内所有内容的总宽度，包含超出视口的部分。
• ViewportWidth：ScrollViewer当前能显示的区域宽度（如果有垂直滚动条，会自动减去滚动条的宽度，不需要手动计算）。
• totalScrollableWidth：内容超出视口的部分，也就是滚动条能移动的总有效距离。

额外注意事项 #

• 确保两个ScrollViewer的HorizontalScrollBarVisibility设置一致（比如都设为Auto或者Visible），这样视口宽度的计算逻辑才会统一。
• 如果需要同步垂直滚动，只需要把代码里的HorizontalOffset换成VerticalOffset，ExtentWidth换成ExtentHeight，ViewportWidth换成ViewportHeight即可。

这样处理后，不管两个ScrollViewer的内容宽度差异多大，滚动条尺寸如何，都能保持滚动位置的比例一致，实现精准同步。

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