在zurb foundation 3中的div中滾動條

Question

我的問題很簡單。 但我用google搜索谷歌搜索谷歌但沒有找到答案。

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

我希望在填充wcontb列時，它不應該超出特定點（由我定義），而是應該使用向上和向下箭頭圖標垂直滾動。

我是新手。 我將非常感謝使用zurb foundation 3的詳細答案和工作示例。

Answer 1

你有兩個問題：

1. 您希望限制中間div（ wcont1b ）的高度，以便內容在到wcont1b時可滾動。
2. 你想要一個漂亮的方式來做它

請注意，這兩個問題是分開的問題。 所以讓我們解決第一個並使用Zurb Foundation 3.2.2你可以像這樣布局你的三個div：

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

我填充了wcont1b以便我們可以看到滾動條的運行情況。 我還將示例內容放在zurb panel （使用panel類），這樣您可以更好地了解div如何分離以及滾動條的行為（我將向您展示兩種方法）。

好的，所以現在你在中心有那么高的div（'wcont1b`），我們希望它有一定的高度，所以它不會占用太多空間，特別是在移動設備上觀看時（盡管我個人喜歡比一個帶滾動條的短小的， 特別是如果div之外和之下有內容 ）。 要控制div的高度，需要在css中使用：

方法＃1

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

max-height值是wcont1b的高度限制，絕對應該根據您的要求進行更改。 overflow-y是負責滾動條的那個。 如果你在wcont1b有一個標題並且你不希望它與內容一起滾動，那么這種方法是不可取的。 所以要做得更漂亮，你應該這樣做：

方法＃2

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

現在請注意，只有列表滾動，標題保持在最頂層。 不同之處在於你的css現在以ul ，列表為目標，而不是整個內容，而不是整個wcont1b 。

有了它你現在有一個高度控制div。 但我認為你希望滾動條看起來很漂亮，這就是jquery插件的用武之地。你告訴我們你已經嘗試了millions但是你沒有向我們展示任何代碼，而且你做的很重要。 但是，讓我舉一個例子，使用jscrollpane，你可以到這里 。 下載必要的文件並在頁面上引用它們后，您需要執行以下操作：

方法＃1需要的代碼：

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

方法＃2需要的代碼：

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

就是這樣，它應該解決你的問題。 如果您遇到更多問題，您需要提供盡可能多的信息，以便此處的人員可以更好地幫助您。