Scroll bar in a div in zurb foundation 3

Question

My question is very simple. But I have googled and googled and googled but not found an answer.

I have a simple layout in zurb foundation 3

<div class="row" id="wcont1">
    <div class="three columns" id="wcont1a">

    </div>
    <div class="six columns" id="wcont1b">

    </div>
    <div class="three columns" id="wcont1c">

    </div>
</div>

I want that when the wcontb column is populated, it should not expand beyond a particular point (defined by me) but instead it should be scrollable vertically using up and down arrow icons.

I am a novice. I will highly appreciate a detailed answer and a working example using zurb foundation 3.

Answer 1

You have two concerns here:

1. That you want to limit the height of the middle div (wcont1b) so the content is scrollable when it reaches a particular point.
2. That you want a pretty way of doing it

Please take note that the two concerns are separated issues. So let's tackle the first one and using Zurb Foundation 3.2.2 you can layout your three divs like so:

    <div class="row" id="wcont1">
        <div class="three columns" id="wcont1a">
            <div class="panel">
            Content goes here...
            </div>
        </div>
        <div class="six columns" id="wcont1b">
            <div class="panel">
                <h4>Content goes here...</h4>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                </ul>

            </div>
        </div>
        <div class="three columns" id="wcont1c">
            <div class="panel">
            Content goes here...
            </div>
        </div>
    </div>

I populated wcont1b so we can see the scroll bar in action. I also put the sample contents inside a zurb panel (using the panel class) so you can better see how the divs are separated and how the scroll bar behaves (I'll show you two approaches).

Ok so now you have that tall div ('wcont1b`) at the center and we want it to be of a certain height so it will not consume much space, especially when viewed on a mobile (although personally I prefer having a tall div than a short one with a scroll bar especially if there are contents outside the div and below it). To control the height of the div you need this in your css:

Approach #1

#wcont1b .panel { max-height: 150px; overflow-y: scroll; }

The max-height value is the height limit of wcont1b and definitely you should change it per your requirement. The overflow-y is the one that takes care of the scrollbar. This approach will not be desirable if you have a title in wcont1b and you do NOT want it to scroll along with the content. So to make more pretty you should do this:

Approach #2

#wcont1b .panel ul { max-height: 150px; overflow-y: scroll; }

Notice now that only the list scrolls and the header stay on top. The difference is that your css now targets the ul, the list, and not the entire content or not the entire wcont1b.

With that you now have a height-controlled div. But I think you want the scroll bar to look nice and that's where jquery plugins comes in. You told us you have tried millions but you have not shown us any code and it's important that you do. But let me give an example anyway using jscrollpane that you can get here. Once you downloaded the necessary files and referenced them on your page you need to do the following:

The code you need for approach #1:

<script>
$(window).load(function(){
    $('#wcont1b .panel').jScrollPane();
});
</script> 

The code you need for approach #2:

<script>
$(window).load(function(){
    $('#wcont1b .panel ul').jScrollPane();
});
</script> 

That's it, it should solve your problem. If you encounter more issues you need to give as much info as you can so people here can help you better.