水平滚动+滚动条答案

【问题标题】：Horizontal scrolling + scrollbar水平滚动+滚动条
【发布时间】：2015-03-02 12:55:55
【问题描述】：

我想构建一个页面，其中页面中间的某个DIV元素可以水平滚动（大宽度+overflow-x: scroll）。滚动条将显示在此 DIV 的底部。

是否可以在页面的最底部（而不是在 div 的底部）显示一个滚动条，它只滚动页面中间的可滚动DIV 中的内容？

我问这个问题，因为我想将内容放在可滚动的DIV 下方，并且我希望用户能够使用位于该内容下方的滚动条滚动水平的DIV。

<body>
<div id="wrap">

    <div class="slider">
        # Slider content here
    </div>

    <ul class="job_listings scrollable">
        <li>job 1</li>
        <li>job 2</li>
        <li>job 3</li>
        <li>job 4</li>
    </ul>

    <div class="about us">
        # About us content here
    </div>

    ** here I want the scrollbar of the ul job_listings to appear, at the very bottom of the page **

</div>
</body>

【问题讨论】：

你能分享一下你正在尝试的html吗？
我添加了我的html代码示例

标签： css css-position horizontal-scrolling

【解决方案1】：

您可以通过将position: fixed; 添加到不可滚动内容来实现此目的。

.slider {
    position: fixed;
    top: 0; // Assuming you want this to be on top
}
.about_us {
    position: fixed;
    bottom: 0; // Assuming you want this to be on the bottom
}

JSFiddle demo

【讨论】：

谢谢，我认为这是布局页面的唯一可能解决方案。

【解决方案2】：

使用padding-bottom:180px 就像我在这里使用http://jsfiddle.net/v6ohjw32/ 并删除border:2px solid green; 以消除边界

【讨论】：

我相信他希望滚动条位于页面的最底部并且是全角的，就像原生浏览器滚动条一样。
没错，它需要在最底层
您可以根据需要增加 padding-bottom 幅度
这只会下推它下面的内容。