Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 5, 2020 02:17 am GMT

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 the width that is the cause of the overflow. So, if that is the case, you can try replacing it with width: 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 whole view width of the browser and the important part is 100vw does not include the vertical scrollbar's width into its calculation at all. Therefore, when there is a vertical scrollbar, the total width will be the sum of the element's width and the vertical scrollbar's width, which causes the overflow on the x-axis and thus the horizontal 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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To