javascript - Can you fix the scrollbar on the screen? -

i have div has height bigger screen , want leave bit is, div has horizontal scrollbar @ bottom , 1 not visible until user scrolls way down, , bit strage. have scroll down, scroll right , scroll see need. wondering if there way fix bottom scrollbar @ bottom of screen it's available @ time user.

here 2 prints demonstrate problem

what have right now: http://imageshack.us/a/img132/2087/38417747.png

how want make look: http://imageshack.us/a/img267/7452/90387247.png

i going design scrollbar myself using jquery want know if doable without effort.

example: here go: jsfiddle.net/jy3hk/

also, please try answer question without modifying it. want application customizable possible. there option cancel bottom scroll want add option too. thank you.

it possible, require tricky js approach - there no possible css solution question far can reckon.

i have created fiddle here - http://jsfiddle.net/teddyrised/szuzk/, more or less proof-of-concept modification original fiddle, before go off, implore understand approach first :)

the problem have scrollbar @ bottom of scrolling element, regardless of height of viewport. in order bring scrollbar bottom of viewport (not scrolling element), have resize element such bottom of element @ bottom of viewport, , not lower.

this done detecting .scroll event, , subsequently recalculating element height on go. however, means element not take original 1500px height intended - create wrap-around element , assign height it.

$(document).ready(function () {     // create wrap around element     $('#big').wrap('<div id="scroll-wrap" />');      // function: resize element when scrolling     function recalcheight() {          $('#big').css({              'height': $(window).height() + $(window).scrolltop() - $('#big').offset().top          });            }      // resize wrap around element upon resize     $(window).resize(function () {         $('#scroll-wrap').css({             'height': $('#big').css('max-height')         });     }).resize(); // fires resize() event onload      // recalculate height upon load, , upon scroll     recalcheight();     $(window).scroll(function () {         recalcheight();     }); }); 

that's ;)