再次考验你的css功底，这样的横向平滑滚动效果，只用css就可以实现，想不想来挑战一下？ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7967afe332a486d9b91ac8db6c2f68f~tplv-k3u1fbpfcp-zoom-1.image#?w=821\&h=387\&s=8803192\&e=gif\&f=83\&b=060606) 看到这个效果同学们脑子里第一个想到的是什么？监听鼠标的滚轮事件吗？其实也可以实现但是非常的麻烦，因为要做到平滑滚动的话，还要去算这个事件的触发频率以及滚动的距离。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de6b7d1a1d854fffa34a2b1c5f8a7ec6~tplv-k3u1fbpfcp-zoom-1.image#?w=243\&h=243\&s=177785\&e=png\&b=daa876) 我是渡一子辰老师，今天给大家介绍的是纯CSS 实现横向滚动的原理和步骤，通过具体的代码示例和深入的技术分析，让你的技术更上一层楼！ # 思考要实现这个效果其实很简单，只需要换个角度看问题就行了。我们都知道鼠标滚轮可以控制的是竖向的滚动条，那如果我们把显示器旋转 90 度呢？比如下图这样： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b027fcd472bd4b45879fe145d79245eb~tplv-k3u1fbpfcp-zoom-1.image#?w=958\&h=390\&s=28049\&e=png\&b=ffffff) 这样竖的滚动条是不是就变成横的了，而且鼠标依然可以控制它。怎么样？是不是很有趣。虽然旋转显示器是在搞笑，但是这个思维的转换其实就是这个效果实现的切入点，我们可以用 css 来旋转元素，达到同样的效果。我们今天将这个效果做成一个 vue 的通用组件，组件的名字就叫做 XScroll 吧。先看一下 XScroll 组件的嵌套结构，为什么这样嵌套看接下来的图例你就明白了。 ```vue ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e7ea15ba3e24a1d92a00cf28d692655~tplv-k3u1fbpfcp-zoom-1.image#?w=639\&h=829\&s=183461\&e=png\&b=fdf8f8) 如上图所示，通过之前的思考我们知道换个角度看就可以实现效果，那么我们用代码把想法实现出来就好了。通过图 **①** 与 **②** 我们知道，scroll 其实是竖着的，这样 scroll 的滚动条我们才可以通过鼠标滚轮控制，然后我们通过 css 将 scroll 旋转成图 **①** 的样子，这样 scroll 的竖向滚动条就变成了横向的，我们依然可以通过鼠标滚轮来控制。因为 container 是我们的最外围的容器，而 scroll 与 container 是一样大的，但是我们要知道 scroll 最开始是竖着的。也就说，scroll 的宽等于 container 的高，scroll 的高等于 container 的宽。好了，思路到这里我们已经清楚了，接下来就是用代码把想法实现出来。 # 实现首先我们知道 scroll 的大小是根据 container 的大小来的，所以我们必须知道 container 的大小，这里我们通过之前写过的一个 Vue 指令来获取 container 的大小，并且指令可以在 dom 元素的大小改变时获取最新的尺寸，指令的代码放在最后。 ```vue ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/186327a8e2a44b15a66ea493431b9818~tplv-k3u1fbpfcp-zoom-1.image#?w=601\&h=720\&s=203966\&e=png\&b=010101) 通过以上代码我们可以的到上图中的效果，那么下一步我们就要旋转一下 content，使其放置于 scroll 中，并且 scroll 要出现滚动条。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d594dabf9f7b43a7a69e3b2588547f14~tplv-k3u1fbpfcp-zoom-1.image#?w=982\&h=547\&s=225225\&e=png\&b=fdf8f8) ```vue .scroll { outline: 5px solid #7985ec; width: calc(v-bind("s.h") * 1px); height: calc(v-bind("s.w") * 1px); position: relative; overflow: auto; } .content { outline: 5px solid #f1ac6a; height: calc(v-bind("s.h") * 1px); position: absolute; left: 100%; transform-origin: 0 0; transform: rotate(90deg); } ``` 现在我们得到了这样的效果。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6ba205a5e124ac4a9b6570fbc8e2ddd~tplv-k3u1fbpfcp-zoom-1.image#?w=631\&h=658\&s=1313099\&e=gif\&f=27\&b=020202) 可以说现在我们已经实现了，就差最后一步了，我们将 content 旋转到 container 里就大功告成了。按照惯例请看图。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb36f42325ad43859c40f720521b47e9~tplv-k3u1fbpfcp-zoom-1.image#?w=908\&h=559\&s=156922\&e=png\&b=fdf6f6) ```css .scroll { outline: 5px solid #7985ec; width: calc(v-bind("s.h") * 1px); height: calc(v-bind("s.w") * 1px); position: relative; overflow: auto; transform-origin: 0 0; transform: translateY(calc(v-bind("s.h") * 1px)) rotate(-90deg); } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d33cd4ef5ea046a595232f1131c2bcbe~tplv-k3u1fbpfcp-zoom-1.image#?w=631\&h=340\&s=1841132\&e=gif\&f=32\&b=050505) 最后我们隐藏滚动条去除边框就得到了我们所需要的效果啦！ # 自定义指令代码 ```js const map = new WeakMap(); const ob = new ResizeObserver((entries) => { for (const entry of entries) { const handler = map.get(entry.target); if (handler) { const box = entry.borderBoxSize[0]; handler({ width: box.inlineSize, height: box.blockSize, }); } } }); export default { mounted(el, binding) { ob.observe(el); map.set(el, binding.value); }, unmounted(el) { ob.unobserve(el); }, }; ``` # 总结整个实现过程非常巧妙地使用了 css，让我们感受到了 css 的强大和灵活。当然这只是一个非常小的知识点，因为 CSS 是我们永远学不会的语音啊。 # 本文来源本文来源自渡一公众号:**Duing**，欢迎关注，获取**超新**、**超深入**的技术讲解感谢你阅读本文，如果你有任何疑问或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！