I have a long div (let's say longer than the screen) with a horizontal scrollbar, appearing at the bottom of the div, and I would like the horizontal scrollbar to appear at the bottom of the window, not at the bottom of the div. My situation is similar to this fiddle, and I cannot really modify the layout...
Example:
<p>blabla</p>
<div id="scrolling">
<div id="longdiv">
<p>Looooooong looooong div, please scroll down to see the horizontal scrollbar at the bottom! If only it was <pre>position:fixed; bottom:0px;</pre>!</p>
</div>
</div>
<p>blabla</p>
with corresponding css:
#scrolling {
overflow: auto;
width: 500px;
display: block;
position: relative;
border: 1px solid blue;
}
#longdiv {
width: 1500px;
height: 2000px;
border: 1px solid red;
}
How can I achieve what I want?
Thank you!
Note: somehow the same as Fix scrollbar to bottom but more complete and with an example, and not similar to Fixing the horizontal scrollbar of a div to the bottom of a page because I cannot modify my layout according to the accepted (and only) answer.
Edit: though I cannot find anything related to this question on google, it seems I'm not the first person to have had this problem: gmail implements such a thing. If you open a mail thread with a tiny window, there's a custom scrollbar for the div of the thread, alwas appearing at the bottom of the screen... Too bad source code is obfucated...
There is a nice jQuery plugin which takes care of this.
You can use it like this:
$(document).ready(function () {
$(".yourClassName").floatingScroll();
});
Try jQuery.Scrollbar, look at the advanced demo examples - there is "external" scrollbar demo you need.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With