I'm not sure if title is clear, so few words of explanation. I've got few little elements, let say div
's (200px
x 400px
CONSTANT). Inside each of them, there is a paragraph with about 20 lines of text. Of course, this it to much for a poor little div. What I want to do is:
div
has overflow: hidden
property.:hover
) this property is changed to overflow: auto;
, and the scrollbar appears.What is the problem? I want a little space (padding or margin) between the paragraph text and the scrollbar. Let's say that paragraph has a symetrical margin: 20px;
. But after :hover
triggers on, the scrollbar appears, and the whole right side of the paragraph is moved "scrollbar-width" px
to the left. Sentences are broken in other lines, and the whole paragraph look different, which is quite annoying and not user friendly. How can I set my CSS, so the only change after hover will be 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 have done a little snippet for it, with exaplanation of my problem in strong
. I hope everything is clear :). I'm searching for a solution for almost two hours now, so I think my question is quite 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>
To get the width of the scrollbar, you use the offsetWidth and clientWidth of the Element : The offsetWidth returns the width of the Element in pixels including the scrollbar. The clientWidth returns the with of the Element in pixels without the scrollbar.
The default scrollbar width can range anywhere from 12px to 17px. Webkit browsers also have the ability for the user to configure scrollbar widths. Webkit browsers, such as Chrome can have custom scrollbars that can have any size scrollbar.
To view text that exceeds the height of 100px , we have set the overflow-y property to scroll . To add scrollbar on both axes, you can add the overflow property instead of adding both overflow-x and overflow-y properties. Take your career to the next level.
Scrollbar widths can vary between browsers and operating systems, and unfortunately CSS does not provide a way to detect those widths: we need to use JavaScript.
Other people have solved this problem by measuring the width of the scrollbar on an element:
We create a div .scrollbar-measure
, add a scrollbar, and return its size.
// Create the div 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); // Delete the div document.body.removeChild(scrollDiv);
This is fairly straightforward, but it is (obviously) not pure CSS.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With