Skip to content

Instantly share code, notes, and snippets.

@replete
Created April 14, 2012 15:02
Show Gist options
  • Save replete/2385046 to your computer and use it in GitHub Desktop.
Save replete/2385046 to your computer and use it in GitHub Desktop.
iOS like scrollbars (requires nicescroll)
/* -------------------------------------- */
//iOS-like scrollbar
var $niceScrollContainers = $("[data-ios-scroll]");
$niceScrollContainers.each(function () {
var $container = $(this),
scrollClass = $container.attr("data-ios-scroll"),
cursorWidth = "6px",
$contentsLastChild = $container.children("*:last-child");
if ($contentsLastChild.length) {
var pos = $contentsLastChild.position(),
containerContentsHeight = pos.top + $contentsLastChild.height() + parseInt($container.css("padding-top")) + parseInt($container.css("padding-bottom"));
} else return;
if (containerContentsHeight > $container.height()) {
$container
.niceScroll({
cursorborder: "0",
cursorwidth: cursorWidth,
cursorcolor: "#797979",
background: "#e6e6e6"
})
.rail
.addClass("ios-scroll ios-scroll-rail " + scrollClass)
.css("width", cursorWidth)
$container
.niceScroll()
.cursor
.addClass("ios-scroll ios-scroll-cursor " + scrollClass);
} else {
//Too short for scrollbars
$container
.parent()
.removeClass("fade-top fade-bottom");
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment