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

如果我理解你的问题，你只需要为每个子div添加overflow: auto;，而不是父div。

检查出来：https://jsfiddle.net/f3utadqh/

解决了滚动问题，但添加了滚动条。这可能是https://stackoverflow.com/a/23771140/4856759

的潜在解决方案

Answer 2

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

T value{};

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

Answer 3

如果你真的想要获得两个课程＆＃34; row＆＃34; div分别滚动，试试这个。我添加了Lorem Ipsum和一个高度约束，这样你就可以看到它是如何工作的。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: