- 1). Launch the HTML editor and create a new HTML document. Insert the following line in the "Body" of the newly created HTML document: <script type="text/javascript">. The body consists of all of the text in the HTML document between the "<Body>" and "</Body>" lines.
- 2). Copy and paste the following code into the HTML document immediately following the "<script type="text/javascript">" line so the scrollbar width is calculated and displayed in the browser:
function getScrollerWidth() {
var scr = null;
var inn = null;
var wNoScroll = 0;
var wScroll = 0;
// Outer scrolling div
scr = document.createElement('div');
scr.style.position = 'absolute';
scr.style.top = '-1000px';
scr.style.left = '-1000px';
scr.style.width = '100px';
scr.style.height = '50px';
// Start with no scrollbar
scr.style.overflow = 'hidden';
// Inner content div
inn = document.createElement('div');
inn.style.width = '100%';
inn.style.height = '200px';
// Put the inner div in the scrolling div
scr.appendChild(inn);
// Append the scrolling div to the doc
document.body.appendChild(scr);
// Width of the inner div sans scrollbar
wNoScroll = inn.offsetWidth;
// Add the scrollbar
scr.style.overflow = 'auto';
// Width of the inner div width scrollbar
wScroll = inn.offsetWidth;
// Remove the scrolling div from the doc
document.body.removeChild(
document.body.lastChild);
// Pixel width of the scroller
return (wNoScroll - wScroll);
} - 3). Complete the use of the javascript by entering the following line immediately after the scrollbar width calculator code: </script>.
- 4). Save the HTML document and launch the Safari browser. Open the HTML document by clicking on the "File" menu and selecting "Open File" and then navigating to where the HTML file was stored on the computer. The width of the Safari scrollbars will be displayed in the browser window.
previous post
next post