Question

在关注Codepen上的示例之后，我发现它在Firefox上无法正常运行。我认为这只是一个缺少的预修复，但这不起作用。

当您在鼠标或触控板上水平滑动时，它会稍微有效，但这并不令人满意。

尝试单击滚动区域，与Chrome不同，它不会完全滚动到下一部分。

它不会通过滚轮滚动到下一部分。当在具有魔术鼠标的Mac上使用时，它会间歇性地工作，但是用户必须将手指滑过而不是向上和向下滑动。

我该如何解决这个问题？

＆＃13;

body {
  margin: 0;
  font-family: Georgia;
}

#container .box {
  width: 100vw;
  height: 100vh;
  display: inline-block;
  position: relative;
}

#container .box>div {
  width: 100px;
  height: 100px;
  font-size: 96px;
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  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;
}

＆＃13;

<div id="container">
  <div id="container2">
    <div class="box one">
      <div>1</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>

＆＃13;

以下是示例codepen

Firefox上的水平滚动问题

0 个答案: