html - 使用 zurb 基础创建可垂直滚动的两个 div

Question

所以我正在使用 Zurb Foundation，我想创建两个垂直滚动的 div。我喜欢这个example

这是html

        <div class="row">
            <div class="scrollablediv">
                <section class="small-2 small-offset-8 columns">
                    <img src="img/blanche.png" alt="Blanche" />
                </section>
                <section class="small-2 columns">
                    <img src="img/nuit.png" alt="Nuit" />
                </section>
            </div>
        </div>

这是CSS

.scrollablediv{
  height:800px; 
  overflow-y: scroll;

}

但是，当我滚动它时，它会滚动两者。我想让他们分开滚动。我该怎么做？提前致谢

Answer 1

如果我正确理解你的问题，你所要做的就是将 overflow: auto; 添加到每个子 div，而不是父 div。

查看:https://jsfiddle.net/f3utadqh/

这解决了滚动问题，但增加了滚动条。一个潜在的解决方案可能在这里 https://stackoverflow.com/a/23771140/4856759