再次考验你的css功底,这样的横向平滑滚动效果,只用css就可以实现,想不想来挑战一下?
看到这个效果同学们脑子里第一个想到的是什么?监听鼠标的滚轮事件吗?其实也可以实现但是非常的麻烦,因为要做到平滑滚动的话,还要去算这个事件的触发频率以及滚动的距离。
我是渡一子辰老师,今天给大家介绍的是纯CSS 实现横向滚动的原理和步骤,通过具体的代码示例和深入的技术分析,让你的技术更上一层楼!
要实现这个效果其实很简单,只需要换个角度看问题就行了。
我们都知道鼠标滚轮可以控制的是竖向的滚动条,那如果我们把显示器旋转 90 度呢?比如下图这样:
这样竖的滚动条是不是就变成横的了,而且鼠标依然可以控制它。怎么样?是不是很有趣。
虽然旋转显示器是在搞笑,但是这个思维的转换其实就是这个效果实现的切入点,我们可以用 css 来旋转元素,达到同样的效果。
我们今天将这个效果做成一个 vue 的通用组件,组件的名字就叫做 XScroll 吧。先看一下 XScroll 组件的嵌套结构,为什么这样嵌套看接下来的图例你就明白了。
如上图所示,通过之前的思考我们知道换个角度看就可以实现效果,那么我们用代码把想法实现出来就好了。
通过图 ① 与 ② 我们知道,scroll 其实是竖着的,这样 scroll 的滚动条我们才可以通过鼠标滚轮控制,然后我们通过 css 将 scroll 旋转成图 ① 的样子,这样 scroll 的竖向滚动条就变成了横向的,我们依然可以通过鼠标滚轮来控制。
因为 container 是我们的最外围的容器,而 scroll 与 container 是一样大的,但是我们要知道 scroll 最开始是竖着的。也就说,scroll 的宽等于 container 的高,scroll 的高等于 container 的宽。
好了,思路到这里我们已经清楚了,接下来就是用代码把想法实现出来。
首先我们知道 scroll 的大小是根据 container 的大小来的,所以我们必须知道 container 的大小,这里我们通过之前写过的一个 Vue 指令来获取 container 的大小,并且指令可以在 dom 元素的大小改变时获取最新的尺寸,指令的代码放在最后。
通过以上代码我们可以的到上图中的效果,那么下一步我们就要旋转一下 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 是我们永远学不会的语音啊。
如果你有什么问题或建议,请在评论区留言,如果你觉得这篇文章有用,请点赞收藏或分享给你的朋友!