CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Elie Roux
Elie Roux

Reputation: 455

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

Upvotes: 12

Views: 23279

Answers (3)

R. Oosterholt
R. Oosterholt

Reputation: 8080

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

You can use it like this:

$(document).ready(function () {
    $(".yourClassName").floatingScroll();
});

Upvotes: 6

Gromo
Gromo

Reputation: 1609

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

Upvotes: 1

bingjie2680
bingjie2680

Reputation: 7773

set the scrolling width to larger than the longdiv. see this: http://jsfiddle.net/xaTe9/2/

#scrolling {
   overflow: hidden;
   width: 1500px;
   display: block;
   position: relative;
   border: 1px solid blue;
}

Upvotes: 1

Related Questions