如何将元素垂直滚动映射至另一元素水平滚动并关联尺寸

要解决两个容器滚动不同步的问题，核心是基于滚动进度比例来计算偏移量，而非直接将垂直滚动的像素值赋值给水平滚动。

关键计算公式 #

通过垂直容器的滚动百分比，映射到水平容器的滚动位置，公式如下：

// 计算垂直滚动的进度比例（范围0到1）
const scrollProgress = elem1.scrollTop / (elem1.scrollHeight - elem1.clientHeight);
// 映射为水平滚动的偏移量
elem2.scrollLeft = scrollProgress * (elem2.scrollWidth - elem2.clientWidth);

• scrollHeight - clientHeight：垂直容器的实际可滚动距离（总内容高度减去容器可视高度）
• scrollWidth - clientWidth：水平容器的实际可滚动距离（总内容宽度减去容器可视宽度）
• 该比例计算能保证：当垂直容器滚到底部时，水平容器刚好滚到最右侧，完全同步滚动节奏。

修改后的完整代码 #

JavaScript #

const multiElementScroll = (elem1, elem2) => {
  elem1.onscroll = function() {
    // 避免容器内容不足以滚动时出现NaN
    if (this.scrollHeight <= this.clientHeight) return;
    
    const verticalProgress = this.scrollTop / (this.scrollHeight - this.clientHeight);
    elem2.scrollLeft = verticalProgress * (elem2.scrollWidth - elem2.clientWidth);
  };
}

multiElementScroll(div1, div2);

HTML #

<div class="scroll-box" id="div1"> 
    <h1>A</h1>
    <h2>B</h2>
    <h2>C</h2>
    <h2>D</h2>
    <h2>E</h2>
    <h2>F</h2>
    <h2>G</h2>
    <h2>H</h2>
</div>

<div class="scroll-box scroll-box-h" id="div2"> 
    <h1>1</h1>
    <h2>2</h2>
    <h2>3</h2>
    <h2>4</h2>
    <h2>5</h2>
</div>

SCSS #

.scroll-box {
    width: 200px;
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #d99;
    
    &-h {
        display: flex;
        height: 100px;
        width: 1000px;
        overflow-x: overlay;
        overflow-y: hidden;
        
        h1, h2 {
            display: inline;
            margin: 0 200px 0 0 !important;
        }
    }
}

.scroll-box h2 { margin-top: 50px; }

原代码问题分析 #

原代码直接将scrollTop赋值给scrollLeft，这种方式仅在两个容器的可滚动距离完全相等时才会同步。一旦垂直容器的可滚动高度与水平容器的可滚动宽度存在差异（比如案例中的内容高度、边距不同），就会出现滚动结束时机错位的问题。

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