CODEWITHSUNDEEP
csscss-positionhorizontal-scrolling
Stan M
Stan M

Reputation: 55

Horizontal scrolling + scrollbar

I want to build a page, where a certain DIV element in the middle of the page is horizontally scrollable (big width + overflow-x: scroll). The scrollbar will show up at the bottom of this DIV.

Is it possible to show a scrollbar at the very bottom of the page (so not at the bottom of the div) which only scrolls the content in that scrollable DIV in the middle of the page?

I ask this question, because I want to place content underneath the scrollable DIV, and I want the user to be able to scroll the horizontal DIV with a scrollbar that is places underneath this content.

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

Upvotes: 0

Views: 154

Answers (2)

Praxis Ashelin
Praxis Ashelin

Reputation: 5217

You are able to achieve this by adding position: fixed; to the non-scrollable content.

.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

Upvotes: 1

YourFriend
YourFriend

Reputation: 434

Use padding-bottom:180px like i did here http://jsfiddle.net/v6ohjw32/ and remove border:2px solid green; to eliminate borders

Upvotes: 0

Related Questions