An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Why 100vw causes horizontal scrollbar
This post is from my personal blog here
Do you ever wonder why sometimes your site just has a horizontal scrollbar appeared out of nowhere? Today I just ran into it again (as always ) and I somehow figured out how to remove it. So here is the step I took to debug and fix it.
- Try the global border or outline color trick to find which element is causing it:
* { border: 1px solid red;}
- Find elements with width bigger than the document's width (more from csstrick)
var docWidth = document.documentElement.offsetWidth;[].forEach.call(document.querySelectorAll('*'), function (el) { if (el.offsetWidth > docWidth) { console.log(el); }});
- Most of the times, I always find the
100vw
value on thewidth
that is the cause of the overflow. So, if that is the case, you can try replacing it withwidth: 100%
instead and see if it works. Try with its inner elements as well if present.
So, back to the title, why would 100vw
be the cause? Well, the answer is:
When you set an element's width to
100vw
, the element's width now will be the wholeview width
of the browser and the important part is100vw
does not include thevertical scrollbar
'swidth
into its calculation at all. Therefore, when there is avertical scrollbar
, thetotal width
will be the sum of theelement's width
and thevertical scrollbar's width
, which causes the overflow on the x-axis and thus thehorizontal scrollbar
.
Hope this helps!
Feel free to correct me if you think there is something wrong
Original Link: https://dev.to/tepythai/why-100vw-causes-horizontal-scrollbar-4nlm
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To