Skip to content

Instantly share code, notes, and snippets.

@mindplay-dk
Created January 26, 2011 15:31
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mindplay-dk/796851 to your computer and use it in GitHub Desktop.
Save mindplay-dk/796851 to your computer and use it in GitHub Desktop.
Small plugin that reports the size of the browser's scrollbars in pixels.
/*!
* jQuery Scrollbar Width v1.0
*
* Copyright 2011, Rasmus Schultz
* Licensed under LGPL v3.0
* http://www.gnu.org/licenses/lgpl-3.0.txt
*/
(function($){
$.scrollbarWidth = function() {
if (!$._scrollbarWidth) {
var $body = $('body');
var w = $body.css('overflow', 'hidden').width();
$body.css('overflow','scroll');
w -= $body.width();
if (!w) w=$body.width()-$body[0].clientWidth; // IE in standards mode
$body.css('overflow','');
$._scrollbarWidth = w;
}
return $._scrollbarWidth;
};
})(jQuery);
@mc360photo
Copy link

I am trying to use the plugin to get width of scrollbar of a page embedded in iframe, but it always return 0.
It works perfectly if page is not embedded in iframe.
Any suggestion how to use the plugin inside an iframe?
Thanks
Marco

@mindplay-dk
Copy link
Author

no idea, but surely the width of the scrollbar in an iframe must be the same as the width of the scrollbar in the main window, so just measure that instead?

@mc360photo
Copy link

Unfortunately I have no access to the main window code, It can be any third party page embedding my page.
Do you know how to access the main page from embedded iframe page code?

Thanks
Marco

@mindplay-dk
Copy link
Author

well, window.opener or window.top - but if your page is embedded from another domain, you most likely won't be allowed access.

@mc360photo
Copy link

Thanks, I will try
Marco

@geekdenz
Copy link

Great stuff, seems to work well and so simple. :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment