Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

fixed position horizontal scrollbar

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

like image 472
Elie Roux Avatar asked Mar 15 '14 14:03

Elie Roux


Video Answer


2 Answers

There is a nice jQuery plugin which takes care of this.

You can use it like this:

$(document).ready(function () {
    $(".yourClassName").floatingScroll();
});
like image 120
R. Oosterholt Avatar answered Sep 20 '22 17:09

R. Oosterholt


Try jQuery.Scrollbar, look at the advanced demo examples - there is "external" scrollbar demo you need.

like image 27
Gromo Avatar answered Sep 20 '22 17:09

Gromo