什么？CSS 能实现鼠标滚轮的横向滚动？

再次考验你的css功底，这样的横向平滑滚动效果，只用css就可以实现，想不想来挑战一下？

看到这个效果同学们脑子里第一个想到的是什么？监听鼠标的滚轮事件吗？其实也可以实现但是非常的麻烦，因为要做到平滑滚动的话，还要去算这个事件的触发频率以及滚动的距离。

我是渡一子辰老师，今天给大家介绍的是纯CSS 实现横向滚动的原理和步骤，通过具体的代码示例和深入的技术分析，让你的技术更上一层楼！

思考

要实现这个效果其实很简单，只需要换个角度看问题就行了。

我们都知道鼠标滚轮可以控制的是竖向的滚动条，那如果我们把显示器旋转 90 度呢？比如下图这样：

这样竖的滚动条是不是就变成横的了，而且鼠标依然可以控制它。怎么样？是不是很有趣。

虽然旋转显示器是在搞笑，但是这个思维的转换其实就是这个效果实现的切入点，我们可以用 css 来旋转元素，达到同样的效果。

我们今天将这个效果做成一个 vue 的通用组件，组件的名字就叫做 XScroll 吧。先看一下 XScroll 组件的嵌套结构，为什么这样嵌套看接下来的图例你就明白了。

<template>
  <div class="container">
    <div class="scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

如上图所示，通过之前的思考我们知道换个角度看就可以实现效果，那么我们用代码把想法实现出来就好了。

通过图 ① 与 ② 我们知道，scroll 其实是竖着的，这样 scroll 的滚动条我们才可以通过鼠标滚轮控制，然后我们通过 css 将 scroll 旋转成图 ① 的样子，这样 scroll 的竖向滚动条就变成了横向的，我们依然可以通过鼠标滚轮来控制。

因为 container 是我们的最外围的容器，而 scroll 与 container 是一样大的，但是我们要知道 scroll 最开始是竖着的。也就说，scroll 的宽等于 container 的高，scroll 的高等于 container 的宽。

好了，思路到这里我们已经清楚了，接下来就是用代码把想法实现出来。

实现

首先我们知道 scroll 的大小是根据 container 的大小来的，所以我们必须知道 container 的大小，这里我们通过之前写过的一个 Vue 指令来获取 container 的大小，并且指令可以在 dom 元素的大小改变时获取最新的尺寸，指令的代码放在最后。

<template>
  <!-- v-size-ob 指令，可以在 dom 元素改变大小时获取 dom 元素的尺寸，并且返回尺寸 -->
  <div v-size-ob="handleChange" class="container">
    <div class="scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
const s = reactive({ // 声明一个响应式数据存储一下
  w: 0,
  h: 0,
});
function handleChange(size) { // 通过 v-size-ob 指令的返回值获取 container 的大小
  s.w = size.width;
  s.h = size.height;
}
</script>

<style scoped>
/* 为每一个盒子加上边框方便查看效果 */
.container {
  outline: 5px solid #ec7270;
  width: 100%;
  height: 100%;
}
.scroll {
  outline: 5px solid #7985ec;
  /* 通过 vue3 的 v-bind 在 style 中获取值 */
  /* 因为宽高是有单位的，所以利用 calc 乘以 1px 给宽高加上单位 */
  /* scroll 宽等于 container 的高  */
  width: calc(v-bind("s.h") * 1px);
  /* scroll 高等于 container 的宽  */
  height: calc(v-bind("s.w") * 1px);
}
.content {
  outline: 5px solid #f1ac6a;
  height: calc(v-bind("s.h") * 1px);
}
</style>

通过以上代码我们可以的到上图中的效果，那么下一步我们就要旋转一下 content，使其放置于 scroll 中，并且 scroll 要出现滚动条。

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

现在我们得到了这样的效果。

可以说现在我们已经实现了，就差最后一步了，我们将 content 旋转到 container 里就大功告成了。

按照惯例请看图。

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

最后我们隐藏滚动条去除边框就得到了我们所需要的效果啦！

自定义指令代码

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 是我们永远学不会的语音啊。

如果你有什么问题或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！

什么？CSS 能实现鼠标滚轮的横向滚动？

思考

实现

自定义指令代码

总结

悦读