使用 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

好的，试试这个 - 每个部分现在应该独立滚动，尝试分别定位每个部分？

.scrollablediv {
    height: 400px;
}
.scrollablediv section {
    overflow-y: scroll;
    height: 100px; 
}

<div class="row">
            <div class="scrollablediv">
                <section class="small-2 small-offset-8 columns">
                    <img src="img/blanche.png" alt="Blanche" />
<p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
                </section>
                <section class="small-2 columns">
                    <img src="img/nuit.png" alt="Nuit" />
                    <p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
                </section>
            </div>
        </div>

Answer 2

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

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

这解决了滚动问题，但增加了滚动条。一个潜在的解决方案可能在这里

Answer 3

如果您真的想让两个 class "row" div 分别滚动，试试这个。我添加了 Lorem Ipsum 和高度限制，以便您了解它是如何工作的。

.scrollablediv {
    height: 400px;
    overflow-y: scroll;
}

.scrollablediv {
    overflow-y: scroll;
    height: 100px; 
}

 <div class="row">
            <div class="scrollablediv">
                <section class="small-2 small-offset-8 columns">
                    <img src="img/blanche.png" alt="Blanche" />
<p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
                </section>
                <section class="small-2 columns">
                    <img src="img/nuit.png" alt="Nuit" />
                </section>
            </div>
        </div>
 <div class="row">
            <div class="scrollablediv">
                <section class="small-2 small-offset-8 columns">
                    <img src="img/blanche.png" alt="Blanche" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet purus nunc. Curabitur et varius lectus, vel accumsan eros. Vivamus feugiat gravida massa eu euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris a fermentum arcu. Nunc faucibus est hendrerit nisl iaculis, id accumsan mi pretium. Duis porta erat leo, vitae porta ipsum dignissim vel. Mauris sed vestibulum lectus. Maecenas a risus eros. Nulla quis diam lectus. Nam elementum magna et dictum scelerisque. Quisque sit amet purus dolor. Nunc malesuada luctus nibh sed luctus. Ut lectus diam, consectetur sed libero eu, vestibulum cursus magna. Nam bibendum nisl ac est gravida, in consectetur ante tempor. Fusce tincidunt leo leo, sed sollicitudin metus condimentum sed.</p>

                </section>
                <section class="small-2 columns">
                    <img src="img/nuit.png" alt="Nuit" />
                </section>
            </div>
        </div>

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

creating vertically scrollable two divs with zurb foundation

html

css

zurb-foundation