Проблема горизонтальной прокрутки в Firefox - PullRequest
Новая
       11

Проблема горизонтальной прокрутки в Firefox

0 голосов
/ 25 мая 2018

После изучения примера на Codepen я обнаружил, что он не работает корректно в Firefox.Я думал, что это просто отсутствующее предварительное исправление, но это не сработало.

Слегка работает при горизонтальном скольжении по мыши или трекпаду, но это неудовлетворительно.

Попробуйтещелкните область прокрутки, она не будет полностью прокручиваться к следующему разделу в отличие от Chrome.

Она не прокручивается до следующего раздела с помощью колеса прокрутки.При использовании на Mac с волшебной мышью это работает с перебоями, но пользователь должен провести пальцем по горизонтали, а не вверх и вниз.

Как я могу решить эту проблему? 

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;
}
<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>

Вот пример codepen

...