猎上网登陆官方网站,全网,seoul national university,网站建设评审#x1f9d1;#x1f4bb; 写在开头 点赞 收藏 学会#x1f923;#x1f923;#x1f923;
在项目中我们可能会遇到当鼠标在某个区域内#xff0c;我们希望滚动鼠标里面的内容可以横向滚动#xff1b;
比如我们一些常见的后台状态栏#xff1a; 那这种该怎么写 写在开头 点赞 收藏 学会
在项目中我们可能会遇到当鼠标在某个区域内我们希望滚动鼠标里面的内容可以横向滚动
比如我们一些常见的后台状态栏 那这种该怎么写请看栗子
代码如下
templatedivdiv classtopdiv classtitle横 向 滚 动/div/divdiv refcontainer classcontainerdiv classcontents v-foritem in 20 :keyitem{{ item }}/div/divdiv classbottom/div/div
/templatescript
export default {data() {return {};},mounted() {this.horizontalScrolling();},methods: {// 水平滚动horizontalScrolling() {const container this.$refs.container;container.addEventListener(wheel, (e) {e.preventDefault();container.scrollLeft e.deltaY;});},},
};
/scriptstyle scoped
.container {margin: 20px 0;display: flex;align-items: center;height: 400px;overflow-x: scroll;background: #000;/* 隐藏滚动条 */scrollbar-width: none;-ms-overflow-style: none;
}
.contents {width: 600px;height: 300px;flex-shrink: 0; /* 关闭收缩 */margin: 0 20px;border-radius: 16px;text-align: center;color: #ffffff;line-height: 300px;font-size: 60px;background: linear-gradient(270deg, #ffd700 0%, #be8f00 50%, #ffdd00 100%);
}
/style
主要代码还是这一块 horizontalScrolling() {const container this.$refs.container;container.addEventListener(wheel, (e) {e.preventDefault();container.scrollLeft e.deltaY;});},
一行代码是不可能滴代码压缩那说不准可以哈哈哈哈哈 如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
