CSS: How to get browser scrollbar width? (for: hover {overflow: auto} nice fields)

Question

I am not sure that the title is clear, so there are few words of explanation. I have few elements, say div ( 200px x 400px CONSTANT). Each of them has a paragraph with approximately 20 lines of text. Of course, this is a lot for a bad little div . I want to do this:

• Typically, a div has an overflow: hidden property.
• On a mouse ( :hover ) this property changes to overflow: auto; , and a scroll bar appears.

What is the problem? I want a small space (padding or markup) between the paragraph text and the scroll bar. Let's say that the paragraph has symmetry margin: 20px; . But after triggering :hover , a scrollbar appears, and the entire right side of the paragraph moves "scrollbar-width" px left. Other lines break sentences and the entire paragraph looks different, which is rather annoying, not friendly. How can I set my CSS so that the only change after hover is the appearance of scroolbar?

In other words:

 /* Normally no scrollbar */ div {display: block; width: 400px; height: 200px; overflow: hidden;} /* On hover scrollbar appears */ div:hover {overflow: auto;} /* Paragraph margin predicted for future scrollbar on div */ div p {margin: 20px (20px + scrollbarwidth px) 20px 50px;} /* With scrollbar margin is symmetrical */ div:hover p {margin: 20px;} /* With scrollbar */ 

I made a small fragment for him, with exaplanation of my problem in strong . I hope everything is clear :). I’ve been looking for a solution for almost two hours, so I think my question is completely unique and interesting.

 div.demo1 { width: 400px; height: 200px; overflow: hidden; background: #ddd; } div.demo1:hover { overflow: auto; } div.demo1 p { background: #eee; margin: 20px; } div.demo2 { width: 400px; height: 200px; overflow: hidden; background: #ddd; } div.demo2:hover { overflow: auto; } div.demo2 p { background: #eee; margin: 20px 40px 20px 20px; } div.demo2:hover p { margin: 20px 20px 20px 20px; } 

 <div class="demo1"> <p> This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. </p> </div> <br> <br> <strong>As you can see, on hover right side of the paragraph "moves" left. But I want something like:</strong> <br> <br> <div class="demo2"> <p> This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. </p> </div> <strong>But with a "perfect" scrollbar width (in this example I used 20px)</strong> 

Answer 1

All scrollbars can be different depending on the browser and OS, so you should use javascript.

I found a cool snippet here: http://davidwalsh.name/detect-scrollbar-width

And this is an example: http://jsfiddle.net/a1m6an3u/

The js code creates a div .scrollbar-measure , looks at the size of the scroll bar and returns it.

It looks like this:

 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); 

So, I quickly added jquery code, but I think you can only do this in JS.