如何使两个div共享相同的滚动条而不将它们包装在一个公共容器div中？

Question

我有4个div，我希望中间的两个div共享相同的滚动条。

<div id="a">
    <p>A</p>
</div>

<div id="b">
    <p>B</p>
</div>

<div id="c">
    <p>C</p>
</div>

<div id="d">
    <p>D</p>
</div>

下面的CSS会为每个div s

创建两个滚动条

#b, #c {
    overflow-y : scroll;
}

此外，我无法在div b和div c周围放置包装容器div并使其可滚动。我想用CSS来实现这个目的。