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

Question

有时在 wrapped by width div 中需要将元素背景设置为全宽，所以我将其设置为伪元素，但是 descktop 浏览器，当页面为长高度时，将垂直滚动条添加 16px 到视口(viewport)，所以我计算它 通过计算(见下文)。

这里是 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);

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

附言。没有人溢出:隐藏!

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定位剪掉滚动条并隐藏container/wrapper overflow。简单，聪明，但有效。

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