在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)的高度,以便内容在到达特定点时可滚动.
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> 

就是这样,它应该解决你的问题.如果您遇到更多问题,您需要提供尽可能多的信息,以便此处的人员可以更好地帮助您.