Question

我以一个视差示例为例，将其拆开。（https://css-tricks.com/pure-css-horizontal-scrolling/）。经过大量的调整和调整后，它仍然可以正常工作。

这个想法是让用户向下滚动页面，当他们点击我狭窄的视差区域时，更多的滚动将视差从右移到左。整个部分完成水平滚动后，更多滚动将使用户在页面上向下移动。如果用户向后滚动，当他们击中我的水平滚动区域时，视差滚动将反转。

水平视差效果来自“正常”垂直视差，但整个div都通过“变换：旋转变换”滚动到了其侧面，如CSS所示。

正如我所说，它们在台式机Chrome，Safari和Opera中都能正常运行。但是，在Firefox中，只有当用户切换到水平滚动时，它才起作用。

在我的无线Mac鼠标上，这意味着水平移动手指，这是普通非编码用户可能不知道的，或者至少会干扰体验。

此外，在CSS中，当鼠标悬停在包含div的指针上方时，我将指针更改为“ cursor：ew-resize;”。可以正常工作，并为正在发生的事情添加视觉线索，显示类似于<->的光标。

但是在Firefox中，光标变为垂直和水平箭头的“全部滚动”，就像尖头的十字形。

经过一番谷歌搜索，似乎在Firefox中滚动存在问题，但似乎在最新版本中已解决。如果这是问题所在，我在-moz- -ms- -webkit-版本中添加了旋转变换，这使我怀疑零差。

我的HTML：

  <div id="scrollr">
  <div id="container">
    <div id="container2">
      <div class="box one">
        <div> <img class="devicesImgA" src="images/portfolioResponsiveicon1.jpg" alt="Websites on computer, tablet & phone screens"><img class="arrowIconR" src="images/portfolioArrowR.png" alt="Arrow icon"> </div>
      </div>
      <div class="box two">
        <div> <img class="devicesImgA" src="images/portfolioResponsiveicon2.jpg" alt="Websites on computer, tablet & phone screens"><img class="arrowIconR" src="images/portfolioArrowR.png" alt="Arrow icon"> </div>
      </div>
      <div class="box three">
        <div> <img class="devicesImgA" src="images/portfolioResponsiveicon3.jpg" alt="Websites on computer, tablet & phone screens"><img class="arrowIconR" src="images/portfolioArrowR.png" alt="Arrow icon"> </div>
      </div>
      <div class="box four">
        <div> <img id="devicesImgB" src="images/portfolioResponsiveicon4.jpg" alt="Websites on computer, tablet & phone screens"> </div>
      </div>
    </div>
  </div>
</div>

CSS：

 #scrollr {
position: relative;
display: block;
width: 100%;
height: 700px;
  }
 #container .box {
width: 100%;
height: 550px;
display: inline-block;
position: relative;
cursor: ew-resize;
 }
  #container .box > div {
width: 100%;
height: 1000px;
color: #FFF;
position: absolute;
font-weight: bold;
  }
  #container {
overflow-y: scroll;
overflow-x: hidden;
-ms-transform: rotate(270deg) translateX(-700px); /* IE 9 */
-moz-transform: rotate(270deg) translateX(-700px); /* Firefox*/
-webkit-transform: rotate(270deg) translateX(-700px); / Safari */
transform: rotate(270deg) translateX(-700px);
transform-origin: top left;
position: relative;
display: block;
width: 700px; /* Rotated, so height */
height: 70vw; /* Rotated, so width */
  }
  #container2 {
-ms-transform: rotate(90deg) translateX(-700px); /* IE 9 */
-moz-transform: rotate(270deg) translateX(-700px); /* Firefox*/
-webkit-transform: rotate(90deg) translateX(-700px); /* Safari */
transform: rotate(90deg) translateY(-700px);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
height: 700px;
position: relative;
width: 900px;
  }
  .devicesImgA {
max-width: 100%;
height: auto;
margin: 4% 0 0 0;
position: relative;
display: inline-block;
  }

那么，如何在不使用其他滚动动作的情况下使Firefox中的水平滚动工作？

Firefox在转换时未水平滚动

0 个答案: