响应式 CSS 水平滚动答案

【问题标题】：Responsive CSS Horizontal Scroll响应式 CSS 水平滚动
【发布时间】：2018-04-25 11:37:50
【问题描述】：

我正在尝试在页面上添加水平滚动，这样当您垂直滚动时，页面会水平滚动。我发现了一段完全基于 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>

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

【问题讨论】：

宽度：100vw; height:100vh 表示宽度和高度始终与其所在屏幕的最大值匹配。所以我不太确定是什么问题？也许取消注释它们？
@DanielVickers 感谢您的回复 - 我想要它，以便在您调整屏幕大小时，图像保持屏幕的整个宽度而不显示蓝色背景，尝试取消注释它们但它没有保持图像全宽，仍然显示蓝色背景
使图像显示：块并给它100%的宽度
@hannah 从您的描述来看，您似乎希望图像沿整个滚动条延伸。这意味着图像会失真，要解决这个问题，您需要将图像设置为背景图像，并将大小设置为不重复覆盖。

标签： html css scroll responsive horizontal-scrolling

【解决方案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;}

【讨论】：

【解决方案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>

【讨论】：