头图

有意思的水平横向溢出滚动

最近接到一个很有意思的需求,能否做到当内容横向溢出时,依然能够使用鼠标滚轮对内容进行滚动的方法

什么意思呢?来看看这么一种情况:

我们有一个垂直方向溢出滚动的容器,以及一个水平方向溢出滚动的容器:

如果使用的是非触控板(大部分用户没有触控板),而是使用鼠标来进行操作,会发现,这两个容器中,只有垂直方向溢出滚动的容器,是可以响应鼠标滚轮的:

  1. 垂直方向溢出滚动的容器,正常响应鼠标滚轮,可滚动内容
  2. 水平方向溢出滚动的容器,不会响应鼠标滚轮,不可滚动内容

那么,这里可能就是一个用户痛点。

如果在一些特定场景下,确实有横向滚动的内容,譬如横向的图片内容展示等。又想使用鼠标滚轮对内容进行滚动,能否做到呢?

那是必须的,本文就将介绍一种可能可行的技巧,在特定场景下在水平方向溢出滚动的容器,依然可以用鼠标滚轮进行滚动。

旋转大法

是的,既然只有垂直方向的溢出,才能响应滚轮操作。那我们不妨从这个角度入手。

首先实现一个垂直方向的溢出:

<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,再经过一次旋转,将滚动容器,和内容叠加在一起:

bg5

好,经过这一系列较为复杂的操作,我们就实现了内容适配旋转,给容器加上 overflow: scroll,一切表现正常,我们实现了横向滚动溢出,鼠标滚轮依旧生效!

完整的代码,你可以戳:CodePen Demo -- CSS-Only Horizontal Parallax Gallery

隐藏滚动条

当然,有个问题,这样滚动条就穿帮了。

这里,在现代浏览器,我们可以通过 ::-webkit-scrollbar 相关 CSS 隐藏掉整个滚动条:

/* hide scrollbar */
::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}

这样,整个效果,就感受不到滚动条的存在,可以直接使用滚轮进行控制:

上述操作都在鼠标滚轮下完成。

其他用途场景

这个技巧,只有特定的一些场景才适用。

如果内部的 DOM 复杂一点,整体改造的成本就非常高了,不太适合。

这里再给另外一个用这个技巧实现的 DEMO,一个横向 3D 纯 CSS 的视差效果,使用鼠标滚轮控制页面横向滚动:

bg8

感兴趣可以自行研究下源码,整体的技巧与上述阐述的类似,容器一次旋转,内容二次反向旋转即可。

CodePen Demo -- CSS-Only Horizontal Parallax Gallery By Paulina Hetman

最后

好了,本文到此结束,希望对你有帮助 :)

更多精彩 CSS 效果可以关注我的 CSS 灵感

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。


iCSS
CSS 奇技淫巧,在这里,都有。
9.7k 声望
18.1k 粉丝
0 条评论
推荐阅读
vh 存在问题?试试动态视口单位之 dvh、svh、lvh
大部分同学都知道,在 CSS 世界中,有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。正常而言:1vw 等于1/100的视口宽度 (Viewport Width)1vh 等于1/100的视口高度 (Viewport Height)vmin — vmin ...

chokcoco9阅读 719评论 2

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青55阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

9.7k 声望
18.1k 粉丝
宣传栏