Question

我正在尝试在页面上添加水平滚动，这样当您垂直滚动时，页面会水平滚动。我找到了一段可以完成基于CSS的代码，但它似乎没有响应。我在CodePen上找到了这个。

是否有任何方法可以将此代码转换为响应的页面？

我已附上以下代码。

#container {
  margin-top: -15px;
}

#container .box {
  width: 100vw;
  height: 100vh;
  display: inline-block;
  position: relative;
}

#container .box>div {
  width: 100%;
  height: 100%;
  font-size: 96px;
  color: #FFF;
  position: absolute;
  top: 5%;
  left: 2.6%;
  margin: -50px 0 0 -50px;
  line-height: .7;
  font-weight: bold;
}

#container {
  overflow-y: scroll;
  overflow-x: hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color: #999;
  position: absolute;
  width: 100vh;
  height: 100vw;
}

#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  white-space: nowrap;
  font-size: 0;
}

.one {
  background-color: #45CCFF;
}

.two {
  background-color: #49E83E;
}

.three {
  background-color: #EDDE05;
}

.four {
  background-color: #E84B30;
}

<div id="container">
  <div id="container2">

    <div class="box one">
      <div class="full">
        <img class="desktop" src="public/images/lookbook/4.jpg" alt="Header" />
      </div>
    </div>


    <div class="box two">
      <div>2</div>
    </div>


    <div class="box three">
      <div>3</div>
    </div>


    <div class="box four">
      <div>Last</div>
    </div>


  </div>
</div>

如果有人有任何想法 - 请告诉我！

Answer 1

我主动删除了所有那些丑陋的空格和滚动条，以及你要求的内容：Codepen

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
}

#container {
    width: calc(100vh + 17px);
    height: 100vw;
    margin-top: -17px;
    margin-right: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
    transform: rotate(270deg) translateX(-100%);
    transform-origin: top left;
    background-color: #999;
    position: absolute;
}

#container2 {
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    white-space: nowrap;
    font-size: 0;
}

 #container .box {
    width: 100vw;
    height: 100vh;
    display: inline-block;
    position: relative;
} 

 #container .box > div {
    font-size: 96px;
    color: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    line-height: 0.9;
    font-weight: bold;
}

.full {
    height: 100%;
    width: 100%;
    position: relative;
}

.desktop {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background-size: cover;
}

.one {background-color: #45CCFF;}
.two {background-color: #49E83E;}
.three {background-color: #EDDE05;}
.four {background-color: #E84B30;}

Answer 2

以下是您想要的代码，请将图像用作背景。这允许它完全覆盖div，如你所愿。虽然也有回应。

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
}

#container .box {
  width: 100vw;
  height: 100vh;
  display: inline-block;
  position: relative;
  background-size: cover;
}

#container .box>div {
  width: 100%;
  height: 100%;
  font-size: 96px;
  color: #FFF;
  position: absolute;
  top: 5%;
  margin: 20px 0px 0px;
  line-height: .7;
  font-weight: bold;
}

#container {
  overflow-y: scroll;
  overflow-x: hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color: #999;
  position: absolute;
  width: 100vh;
  height: 100vw;
}

#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  white-space: nowrap;
  font-size: 0;
}

.one {
  background-color: #45CCFF;
  background-image: url(https://images.pexels.com/photos/1022454/pexels-photo-1022454.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);

}

.two {
  background-color: #49E83E;
  background-image: url(https://images.pexels.com/photos/1023949/pexels-photo-1023949.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}

.three {
  background-color: #EDDE05;
  background-image: url(https://images.pexels.com/photos/963071/pexels-photo-963071.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}

.four {
  background-color: #E84B30;
  background-image: url(https://images.pexels.com/photos/1022928/pexels-photo-1022928.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}

<div id="container">
  <div id="container2">
    <div class="box one">
      <div class="full">
        <div>1</div>
      </div>
    </div>
    <div class="box two">
      <div>2</div>
    </div>
    <div class="box three">
      <div>3</div>
    </div>
    <div class="box four">
      <div>Last</div>
    </div>
  </div>
</div>

响应式CSS水平滚动

2 个答案: