共计 3682 个字符，预计需要花费 10 分钟才能阅读完成。
最近接到一个很有意思的需要，是否做到 当内容横向溢出时，仍然可能应用鼠标滚轮对内容进行滚动的办法。
什么意思呢？来看看这么一种状况：
咱们有一个垂直方向溢出滚动的容器，以及一个程度方向溢出滚动的容器：
如果应用的是非触控板（大部分用户没有触控板），而是应用鼠标来进行操作，会发现，这两个容器中，只有垂直方向溢出滚动的容器，是能够响应鼠标滚轮的：
- 垂直方向溢出滚动的容器，失常响应鼠标滚轮，可滚动内容
- 程度方向溢出滚动的容器，不会响应鼠标滚轮，不可滚动内容
那么，这里可能就是一个用户痛点。
如果在一些特定场景下，的确有横向滚动的内容，譬如横向的图片内容展现等。又想应用鼠标滚轮对内容进行滚动，是否做到呢？
那是必须的，本文就将介绍一种可能可行的技巧，在特定场景下在程度方向溢出滚动的容器，仍然能够用鼠标滚轮进行滚动。
旋转大法
是的，既然只有垂直方向的溢出，能力响应滚轮操作。那咱们无妨从这个角度动手。
首先实现一个垂直方向的溢出：
<div class="g-scroll">
<div class="g-pesudo"></div>
</div>.g-scroll {
width: 200px;
height: 200px;
border: 1px solid #f00;
}
.g-pesudo {
width: 200px;
height: 400px;
background: linear-gradient(rgba(122, 122, 50, .3), rgba(20, 200, 150, .3))
}
``
大略是这样：
好，加上 `overflow: hidden`，就会变成这样：.g-scroll {
overflow: scroll;}
既然 ** 只有垂直方向的溢出，能力响应滚轮操作 **。要想变成程度方向的，咱们只须要给容器旋转 90° 不就行了吗？如同有点情理，咱们来尝试下：.g-scroll {
width: 200px;
height: 200px;
box-sizing: border-box;
transform: rotate(-90deg);
overflow: scroll;}
看看成果：
这样，本来竖直的容器，就变成了程度的容器，图中鼠标没有在滚动条上容器的静止就是通过滚轮实现的。当然，这样还有个十分重大的问题，如果容器内存在内容，那么就变成了这样：
Oh，因为容器整体旋转了 90°，外面的内容当然也一起产生了旋转。咱们须要解决这个问题。### 内容反向旋转 90°，修复视角
这个也好解决，咱们只须要从新结构下 DOM，将本来的内容再反向旋转 90° 一次。当然，须要同时解决好旋转核心。整个构造变成了这样：<div class=”g-scroll”>
<div class="g-pesudo"></div>
<div class="g-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quis ipsum officiis placeat ipsa sit ad incidunt similique, consequuntur earum architecto recusandae veritatis et illo, illum quae nulla minus rerum?
</div></div>
咱们将理论装有了文字内容的 DOM 提取进去成一个独自的 DOM，与 `g-pesudo` 同级。咱们理论触发滚动操作的理论是 `g-pesudo` 的变动，咱们只须要将内容通过再一次旋转，完满叠加在本来的容器之上即可：.g-scroll {
position: relative;
width: 200px;
height: 200px;
transform-origin: 100% 0;
transform: rotate(-90deg);
overflow: scroll;}
.g-pesudo {
width: 200px;
height: 400px;
background: linear-gradient(rgba(122, 122, 50, .3), rgba(20, 200, 150, .3));}
.g-content {
position: absolute;
top: 0;
left: 200px;
width: 400px;
height: 200px;
transform-origin: 0 0;
border: 1px solid #000;
transform: rotate(90deg);}
什么意思呢。通过定位，咱们将 `g-content` 高宽设置为容器旋转后，滚动内容的 DOM 理论体现为的高宽。
并且，通过设定以左下角为旋转核心 `transform-origin: 0 0`，再通过一次旋转，将滚动容器，和内容叠加在一起：
好，通过这一系列较为简单的操作，咱们就实现了内容适配旋转，给容器加上 `overflow: scroll`，所有体现失常，咱们实现了横向滚动溢出，鼠标滚轮仍旧失效！
残缺的代码，你能够戳：[CodePen Demo -- CSS-Only Horizontal Parallax Gallery](https://codepen.io/Chokcoco/pen/PoRLpGO)
### 暗藏滚动条
当然，有个问题，这样滚动条就穿帮了。这里，在古代浏览器，咱们能够通过 `::-webkit-scrollbar` 相干 CSS 暗藏掉整个滚动条：/ hide scrollbar /
::-webkit-scrollbar {
width: 1px;
height: 1px;
}
::-webkit-scrollbar-button {
width: 1px;
height: 1px;
}
这样，整个成果，就感触不到滚动条的存在，能够间接应用滚轮进行管制：
> 上述操作都在鼠标滚轮下实现。## 其余用处场景
这个技巧，只有特定的一些场景才实用。如果外部的 DOM 简单一点，整体革新的老本就十分高了，不太适宜。这里再给另外一个用这个技巧实现的 DEMO，一个横向 3D 纯 CSS 的视差成果，应用鼠标滚轮管制页面横向滚动：
感兴趣能够自行钻研下源码，整体的技巧与上述论述的相似，容器一次旋转，内容二次反向旋转即可。[CodePen Demo -- CSS-Only Horizontal Parallax Gallery By Paulina Hetman](https://codepen.io/pehaa/pen/zYxbxQg)
## 最初
好了，本文到此结束，心愿对你有帮忙 :)
更多精彩 CSS 成果能够关注我的 [CSS 灵感](https://csscoco.com/inspiration/#/)
更多精彩 CSS 技术文章汇总在我的 [Github -- iCSS](https://github.com/chokcoco/iCSS)，继续更新，欢送点个 star 订阅珍藏。
正文完
