public
Last active

jQuery Floating Scrollbar

  • Download Gist
jquery.ba-floatingscrollbar.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
/*!
* jQuery Floating Scrollbar - v0.4 - 02/28/2011
* http://benalman.com/
*
* Copyright (c) 2011 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
 
(function($){
var // A few reused jQuery objects.
win = $(this),
html = $('html'),
 
// All the elements being monitored.
elems = $([]),
 
// The current element.
current,
 
// The previous current element.
previous,
 
// Create the floating scrollbar.
scroller = $('<div id="floating-scrollbar"><div/></div>'),
scrollerInner = scroller.children();
 
// Initialize the floating scrollbar.
scroller
.hide()
.css({
position: 'fixed',
bottom: 0,
height: '30px',
overflowX: 'auto',
overflowY: 'hidden'
})
.scroll(function() {
// If there's a current element, set its scroll appropriately.
current && current.scrollLeft(scroller.scrollLeft())
});
 
scrollerInner.css({
border: '1px solid #fff',
opacity: 0.01
});
 
// Call on elements to monitor their position and scrollness. Pass `false` to
// stop monitoring those elements.
$.fn.floatingScrollbar = function( state ) {
if ( state === false ) {
// Remove these elements from the list.
elems = elems.not(this);
// Stop monitoring elements for scroll.
this.unbind('scroll', scrollCurrent);
if ( !elems.length ) {
// No elements remain, so detach scroller and unbind events.
scroller.detach();
win.unbind('resize scroll', update);
}
} else if ( this.length ) {
// Don't assume the set is non-empty!
if ( !elems.length ) {
// Adding elements for the first time, so bind events.
win.resize(update).scroll(update);
}
// Add these elements to the list.
elems = elems.add(this);
}
// Update.
update();
// Make chainable.
return this;
};
 
// Call this to force an update, for instance, if elements were inserted into
// the DOM before monitored elements, changing their vertical position.
$.floatingScrollbarUpdate = update;
 
// Hide or show the floating scrollbar.
function setState( state ) {
scroller.toggle(!!state);
}
 
// Sync floating scrollbar if element content is scrolled.
function scrollCurrent() {
current && scroller.scrollLeft(current.scrollLeft())
}
 
// This is called on window scroll or resize, or when elements are added or
// removed from the internal elems list.
function update() {
previous = current;
current = null;
 
// Find the first element whose content is visible, but whose bottom is
// below the viewport.
elems.each(function(){
var elem = $(this),
top = elem.offset().top,
bottom = top + elem.height(),
viewportBottom = win.scrollTop() + win.height(),
topOffset = 30;
 
if ( top + topOffset < viewportBottom && bottom > viewportBottom ) {
current = elem;
return false;
}
});
 
// Abort if no elements were found.
if ( !current ) { setState(); return; }
 
// Test to see if the current element has a scrollbar.
var scroll = current.scrollLeft(),
scrollMax = current.scrollLeft(90019001).scrollLeft(),
widthOuter = current.innerWidth(),
widthInner = widthOuter + scrollMax;
 
current.scrollLeft(scroll);
 
// Abort if the element doesn't have a scrollbar.
if ( widthInner <= widthOuter ) { setState(); return; }
 
// Show the floating scrollbar.
setState(true);
 
// Sync floating scrollbar if element content is scrolled.
if ( !previous || previous[0] !== current[0] ) {
previous && previous.unbind('scroll', scrollCurrent);
current.scroll(scrollCurrent).after(scroller);
}
 
// Adjust the floating scrollbar as-necessary.
scroller
.css({
left: current.offset().left - win.scrollLeft(),
width: widthOuter
})
.scrollLeft(scroll);
 
scrollerInner.width(widthInner);
}
 
})(jQuery);

hello cowboy
It doesn't work when I put the page inside an iframe
Can you tell me please, what should I do?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.