Question

我在网站的某些浏览器上限制屏幕宽度时遇到了问题。

我使用的是1920x1080px的屏幕。在FireFox上我无法向右滚动，这很好。但是在Chrome和某些移动浏览器上，我可以使用鼠标中键向右滚动很多，在页面中留下很大的空白。虽然没有水平滚动条。这种情况发生在使用Chrome的其他人身上，我也要求他们对该网站进行测试。我不希望人们能够在x轴上滚动，这意味着“基础层”应该一直填充屏幕的宽度。

是否与某些元素向后转换为300px有关？我似乎无法使用overflow-x: hidden解决问题。 Chrome在100％的时间内也会在页面底部留下一个大的白色间隙。这有关系吗？

有没有解决这个问题，以至于我无法在任何浏览器上滚动到页面右侧？

以下是导致问题的代码：

/* Styles
--------------------------------------------- */

html {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  font-family: Arial;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  height: auto;
}
.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: rgb(255, 255, 255);
}
.info {
  font-size: 2vw;
}


/* Parallax Base Styles
--------------------------------------------- */

.parallax {
  height: 100vh;
  -webkit-perspective: 300px;
  perspective: 300px;
  width: 100vw;
  overflow-x: hidden;
}
.parallax__group {
  position: relative;
  height: 100vh;
  width: 100vw;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.parallax__layer {
  width: 100vw;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.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;
  background-size: cover;
}

/* Style the Groups
--------------------------------------------- */

#groupH {
  z-index: 4;
}
#groupH .parallax__layer--base {
  z-index: 1;
  background: rgb(0, 0, 0);
  height: 50%;
}
#groupH .parallax__layer--back {
  z-index: 0;
  background-color: rgb(0, 0, 100);
}
#group1 {
  z-index: 4;
}
#group1 .parallax__layer--base {
  z-index: 1;
  background: rgb(0, 0, 0);
  height: 50%;
}
#group2 {
  z-index: 3;
}
#group2 .parallax__layer--base {
  z-index: 1;
  background: rgb(0, 0, 0);
  height: 50%;
}
#group2 .parallax__layer--back {
  z-index: 0;
  background-color: rgb(0, 0, 200);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link rel="stylesheet" type="text/css" href="css/parallax.css">
  <title>Title</title>
</head>

<body>
  <div class="parallax">
    <div id="groupH" class="parallax__group">
      <div id="header" class="parallax__layer parallax__layer--base info">
        <div class="title">Header</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
      </div>
    </div>
    <div id="group1" class="parallax__group">
      <div id="info1" class="parallax__layer parallax__layer--base info">
        <div class="title">Base Layer 1</div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div id="info2" class="parallax__layer parallax__layer--base info">
        <div class="title">Base Layer 2</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
      </div>
    </div>
  </div>
</body>

</html>

CSS将HTML宽度限制为屏幕宽度

0 个答案: