CODEWITHSUNDEEP
htmlcssmacosgoogle-chrome
Snowman
Snowman

Reputation: 2495

How to detect if scrollbar takes up space in Chrome for OS X?

I have some code that assumes the vertical scrollbar width for OS X to be 15px and does some layout accordingly.

This works for Mac. However, on the Macbook, Chrome's scrollbar doesn't seem to take up any extra space. It is dispayed as overlay on the page content. This causes the layout to be a bit distorted.

Is there any way I can detect if the scrollbar has reserved space or not for Chrome across Apple desktops/laptops?

Upvotes: 6

Views: 2789

Answers (1)

Luca
Luca

Reputation: 1826

You can use this code from here:

First you define some style guides in your stylesheet: 

/* way the hell off screen */
.scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

And than in your javascript you start like that:

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);

Upvotes: 7

Related Questions