creating vertically scrollable two divs with zurb foundation

Question

So I'm using Zurb Foundation and I want to create two vertically scrollable divs. llike this example

This is the 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>

and this is the css

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

}

However, When I scroll it, it scrolls both of it. I want them to scroll separately. How would I do that? Thanks in advance

Answer 1

If I understand your question correctly, all you have to do is add overflow: auto; to each child div, not the parent div.

Check it out: https://jsfiddle.net/f3utadqh/

That solves the scrolling issue, but adds scrollbars. A potential solution to that could be here https://stackoverflow.com/a/23771140/4856759

Answer 2

Okay, try this - each SECTION should now scroll independent of one another, try targeting each section separately?

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

If you are actually trying to get two class "row" divs to scroll separately, try this. I added Lorem Ipsum and a height constraint so you can see how it works.

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