CODEWITHSUNDEEP
htmlcssscrollbar
user3729910
user3729910

Reputation: 21

div scrollbar outside of visible area

I have a div which is x-scrollable, inside this i have a div with a fixed size to contain header data and a div which ajusts to the page size which contains content matching the headers.

The outside div is x-scrollable so the headers scroll together with the containing data. The data is y-scrollable to allow for long lists of data.

The issue however is that the scrollbar for the data is not visible unless the page is scrolled entirely to the right.

html:

<div id="outerContainer">
<div id="xScroll">
    <div id="Header">fixed height header

    </div>
    <div id="yScroll">this container ajusts to page size
        <div id="whitespace">high content is y-scrollable</div>
        <br/>
    </div>
</div>

css:

#yScroll {
background:green;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
width:1200px;
top: 90px;
bottom: 150px;
}
#whitespace{
    background:white;
    height:500px;
}

#Header {
    background:red;
    height:90px;
    width:1200px;
}

#xScroll {
    position:relative;
    height: 500px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
#outerContainer {
    background:gray;
}
#long {
    width:1200px;
}

I've made a demonstration of the issue at: http://jsfiddle.net/f7sc4/

Upvotes: 2

Views: 10731

Answers (3)

Edward Newsome
Edward Newsome

Reputation: 778

A simple way to display the scroll bar outside the div is this:

#divID{
overflow: hidden;
width: calc(1024px + 0);
}

#divID:hover{
overflow-y:scoll;
}

Works for me. I have my dive positioned absolute.

Upvotes: 2

user3729910
user3729910

Reputation: 21

since the content needed was a table i've found a solution to my issue. You can use the floatThead jquery plugin to style your table which allows for this functionality (along with much more): http://mkoryak.github.io/floatThead

While this plugin usually only allows for fixed table height you can add your a class to the container it generates with a relative height. When this is then placed in an absolute div with .top and .bottom attributes it schales with the page, allows for fixed headers, and allows horizontal and vertical scrolling on the page.

Upvotes: 0

BrendanMullins
BrendanMullins

Reputation: 587

All you have to do is adjust the width of your #yScroll.

Take a look: http://jsfiddle.net/f7sc4/3/

all i did was add max-width:100% to all the elements that had a fixed width of 1200px

Upvotes: 0

Related Questions