防止 100vw 在伪中创建水平滚动

Question

有时在按宽度包裹的 div 中需要将元素背景设置为全宽，所以我将其设置为伪元素，但桌面浏览器，当页面长时，垂直滚动条向视口增加 16px，所以我计算一下 通过计算（见下文）。

这里是Example

HTML：

<div class="wrapped">
 <h1>100vw background in wrapped</h1>
 <div class="fullbg">
  some body text, images, etc here
 </div>
</div>

CSS

html, body {    margin: 0;      padding: 0;    }
body {     height: 100%;     width: 100%;    }
div {      position: relative;   }
*,*:before,*:after {      box-sizing: border-box;
 -moz-box-sizing: border-box;     -webkit-box-sizing: border-box;
}

.wrapped {
 width: 70%;
 margin: 0 auto;
 height: 150vh; /* simulate long heigh */
}
.fullbg {
 height: 5em;
/* some styles here*/
}

.fullbg:before {
 content: "";
 bottom: 0;
 display: block;
 background: rgba(85, 144, 169, 0.7);
 position: absolute;
 width: 100vw;
 right: 50%;
 margin-right: -50vw;                /* work for short page or mobile browser*/
 margin-right: calc( -50vw + 8px );  /* work for desctop long page  */ 
 top: 0;
 z-index: -1;
}

我看了答案

• Prevent 100vw from creating horizontal scroll
• Difference between Width:100% and width:100vw?

和其他问题， 但没有找到真正真正的通用 css 解决方案

作为一个临时解决方案可能是一个js，比如this：

var scrollbarWidth = ($(document).width() - window.innerWidth);

但我认为这不是最好的解决方案，考虑到滚动宽度可能会有所不同，现在我不知道如何将它与伪一起使用。

ps。没有人溢出：隐藏！

Answer 1

滚动条可以专门定位。

在 chrome 和 safari 中查看此修复

http://codepen.io/anon/pen/dXgmbZ

关键 CSS：

.element::-webkit-scrollbar { 
width: 0 !important;
}`

codepen 只是您的 chrome 修复示例。如果您想查看更强大的解决方案，请查看此 JSFiddle：
http://jsfiddle.net/E78q3/

这背后的想法只是用absolute定位和隐藏容器/包装器overflow来剪掉滚动条。简单，聪明，但有效。

延伸阅读：
https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/