水平滚动+滚动条

Question

我想构建一个页面，页面中间的某个 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>

Answer 1

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

Answer 2

您可以通过向不可滚动的内容添加 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

水平滚动+滚动条

Horizontal scrolling + scrollbar

css

css-position

horizontal-scrolling