Horizontal scrollbar of fixed position

Question

I have a long div (albeit longer than the screen) with a horizontal scroll bar appearing at the bottom of the div, and I would like the horizontal scroll bar to appear at the bottom of the window, and not at the bottom of the div. My situation is similar to this script , and I cannot change 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!

Note: it’s somehow the same as fixing the scrollbar to the bottom , but more fully with the example, and doesn’t seem like Fixing the horizontal scrollbar of the div at the bottom of the page , because I can’t change my layout to fit (and the only) answer.

:, -, Google, , , : gmail ​​. , div , ... ...

Answer 1

jQuery, .

:

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

Answer 2

jQuery.Scrollbar, - "" - .

Answer 3

set the scroll width more than the longdiv. see this: http://jsfiddle.net/xaTe9/2/

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