CODEWITHSUNDEEP
javascriptjqueryjquery-pluginscss
aldaron
aldaron

Reputation: 123

JS scrollbar with fluid height

I'd like to personalize the scrollbar of a div whith a fluid height :

section {
max-height:70%;
overflow-y:auto;
}

I have found two smart light snippets : a Jquery plugin (http://baijs.nl/tinyscrollbar/) and a pure JS one (http://gondo.webdesigners.sk/javascript-scrollbar/). The problem is that these snippets do not accept % value for the height. For example, with tinyscrollbar, i have to put this :

section .viewport {
width: auto;
height:440px;
overflow: hidden;
position: relative;
}

If I put "height:100%;" or "height:auto;", the content disappears ! Why does it accept px and not % ? I'd like to understand it...

Which part of the JS/JQuery code should I change/add in order to insert the fluid height of the section ?

Upvotes: 0

Views: 1390

Answers (1)

Stone
Stone

Reputation: 2668

It's hard to follow without more example code (get in the habit of posting more code please), but I think something like this is what you're after.

--- Why don't you track the height of the context (outer div?) and the height of the inner div (section) and calculate them as they change?

var context_height = $("#context_div").height();
var section_height = $("section#id").height();

var percentage = section_height / context_height;
var measurement = percentage + "%";

$(section_height).css("height", measurement); // trigger this with a callback if heights need updating - possibly even re-initializing any scroll plugins, if necessary.

Upvotes: 1

Related Questions