Question

我找不到同步两个div的方法，使用相同的文本，但文本大小和填充不同。我有两个div，一个带有markdown文本，另一个带有markdown的html渲染，我想在div之间同步scrollTop。

例如，请查看stackedit.io

Answer 1

您可以在以下位置查看同步两个div的示例：JSFiddle

<强> HTML

假设您有两个div水平放置在一起。每个div都包含另一个div，它可以垂直滚动：

<div class="outer" id="div1">
    <div>
    </div>
</div>
<div class="outer" id="div2">
    <div>
    </div>
</div>

<强> CSS

这只是为了使两个外部div在同一基线上彼此相邻并使其可以垂直滚动。

div.outer
{
    display:inline-block;
    width:150px;
    height:320px;
    border:1px solid black;
    overflow-y:auto;
}

div.outer > div
{
    width:100%;
    height:3000px;
}

<强>的JavaScript

最简单的方法是，将scroll事件绑定到每个外部div，取scrollTop值并应用于其对应div，如下所示：

$('#div1').scroll(function(){
    $('#div2').scrollTop( $('#div1').scrollTop() );
});

$('#div2').scroll(function(){
    $('#div1').scrollTop( $('#div2').scrollTop() );
});

因此，当您在左侧div上滚动时，它会同步右侧div，反之亦然。

同步两个具有不同文本大小的div之间的滚动

1 个答案: