CSS X 溢出留下空白答案

【问题标题】：CSS X Overflow Leaves White SpaceCSS X 溢出留下空白
【发布时间】：2018-05-20 17:09:22
【问题描述】：

我目前正在创建一个在线作品集，并尝试使用视差 CSS 来获得漂亮的滚动效果。我有一个类将某些样式和格式应用于不同部分的 div。

长话短说，为了避免视差溢出导致页面太宽，我隐藏了 x 溢出，因此它被缩短到视口宽度。但是，这会在屏幕左侧留下一些空白，这真的很烦人。

* {
  padding: 0;
  margin: 0;
}

body {
  font: 100% / 1.5;
}

#homeSplash {
  background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
  background-size: cover;
  color: white;
  text-align: center;
}

#title {
  background: rgba(255, 255, 255, 0.75);
  padding: 50px;
  font-family: 'Ubuntu Condensed', sans-serif;
}

#title h3,
h4,
h1 {
  padding: 10px;
}

.parallax {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-perspective: 300px;
  perspective: 300px;
  font-size: 200%;
}

.parallax__group {
  position: relative;
  height: 500px;
  /* fallback for older browsers */
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
}

.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
}

.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
}

#group2 {
  z-index: 3;
}

.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="parallax">
  <div id="group2" class="parallax__group">
    <div class="parallax__layer parallax__layer--base">
      <div class="title">
        <div id="title">
          <h1>Welcome</h1>
          <h3>I am Luca Passariello</h3>
          <h4>Welcome to my Portfolio</h4>
        </div>
      </div>
    </div>
    <div id="homeSplash" class="parallax__layer parallax__layer--back">
    </div>
  </div>
</div>

我尝试使用width: 100vw，但对解决问题没有任何帮助。任何帮助将不胜感激。

注意 - 实时站点是 here

【问题讨论】：

标签： html css whitespace parallax

【解决方案1】：

将width:100vw 添加到.parallax__group 解决了这个问题。

*{
  padding: 0;
  margin: 0;
}
body{
  font: 100% / 1.5;
  margin: 0;
}
#homeSplash {
    background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
    background-size: cover;
    color: white;
    text-align: center;
}
#title{
  background: rgba(255, 255, 255, 0.75);
  padding: 50px;
  font-family: 'Ubuntu Condensed', sans-serif;
}
#title h3, h4, h1{
  padding: 10px;
}
.parallax {
  height: 100vh;

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-perspective: 300px;
  perspective: 300px;
  font-size: 200%;
}


.parallax__group {
  position: relative;
  height: 500px; /* fallback for older browsers */
  height: 100vh;
  width: 100vw;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);


 transform: translateZ(90px) scale(.7);
  z-index: 1;
}

.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
}

.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
}
#group2 {
  z-index: 3;
}
.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="parallax">
      <div id="group2" class="parallax__group">
        <div class="parallax__layer parallax__layer--base">
          <div class="title">
            <div id="title">
              <h1>Welcome</h1>
              <h3>I am Luca Passariello</h3>
              <h4>Welcome to my Portfolio</h4>
           </div>
         </div>
        </div>
        <div  id="homeSplash" class="parallax__layer parallax__layer--back"
        </div>
      </div>
   </div>
   </div>

【讨论】：