一行代码实现鼠标横向滚动

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

在项目中我们可能会遇到当鼠标在某个区域内,我们希望滚动鼠标里面的内容可以横向滚动;

比如我们一些常见的后台状态栏:
在这里插入图片描述
那这种该怎么写?请看栗子
在这里插入图片描述
在这里插入图片描述

代码如下:

<template><div><div class="top"><div class="title">横 向 滚 动</div></div><div ref="container" class="container"><div class="contents" v-for="item in 20" :key="item">{{ item }}</div></div><div class="bottom"></div></div>
</template><script>
export default {data() {return {};},mounted() {this.horizontalScrolling();},methods: {// 水平滚动horizontalScrolling() {const container = this.$refs.container;container.addEventListener("wheel", (e) => {e.preventDefault();container.scrollLeft += e.deltaY;});},},
};
</script><style 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;});},

😄一行代码是不可能滴,代码压缩那说不准可以,哈哈哈哈哈😄
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/854454.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux 12】进程控制

文章目录 &#x1f308; Ⅰ 进程创建01. fork 函数介绍02. 写时拷贝03. fork 常规用法04. fork 调用失败的原因 &#x1f308; Ⅱ 进程终止01. 进程退出场景02. 常见退出方法 &#x1f308; Ⅲ 进程等待01. 进程等待必要性02. 进程等待的方法2.1 wait 方法2.2 waitpid 方法 03.…

关于禁止word的无用插入模式

这是我的word版本号 点击左上角文件选项 找到左侧最下方的选项 点击高级 把这两个叉掉

第二十篇——去除噪音:如何获得更多更准确的信息?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 噪音的原理&#xff0c;换一个维度来看就会很清晰了&#xff1b;通俗易懂…

element-ui将组件默认语言改为中文

在main.js中加入以下代码即可 // 引入 Element Plus 及其样式 import ElementPlus from element-plus import element-plus/dist/index.css// 引入中文语言包 import zhCn from element-plus/es/locale/lang/zh-cn// 使用 Element Plus 并设置语言为中文 app.use(ElementPlus,…

04 远程访问及控制

1、SSH远程管理 SSH是一种安全通道协议&#xff0c;主要用来实现字符界面的远程登录、远程复制等功能。 SSH协议对通信双方的数据传输进行了加密处理&#xff08;包括用户登陆时输入得用户口令&#xff09;。 终端&#xff1a;接收用户的指令 TTY终端不能远程&#xff0c;它…

数据预处理之基于预测的(线性,ARIMA)异常值检测#matlab

基于密度的LOF异常值检测可见上篇文章。以下介绍基于预测的异常值检测&#xff1a; 1.基于预测的异常值检测方法 基于预测的异常值检测方法&#xff0c;特别是结合线性回归和ARIMA&#xff08;自回归积分滑动平均模型&#xff09;模型&#xff0c;是数据分析中常用的技术。这…

【自动驾驶】ROS小车系统介绍

文章目录 小车组成轮式运动底盘的组成轮式运动底盘的分类轮式机器人的控制方式感知传感器ROS决策主控ROS介绍ROS的坐标系ROS的单位机器人电气连接变压模块运动底盘的电气连接ROS主控与传感器的电气连接运动底盘基本组成电池电机控制器与驱动器控制器与运动底盘状态数据&#xf…

深度学习 --- stanford cs231学习笔记四(神经网络的几大重要组成部分)

训练神经网络1 1&#xff0c;激活函数&#xff08;activation functions&#xff09; 激活函数是神经网络之于线性分类器的最大进步&#xff0c;最大贡献&#xff0c;即&#xff0c;引入了非线性。 1&#xff0c;1 Sigmoid sigmoid函数的性质&#xff1a; 结合指数函数的图像可…

OpenGL3.3_C++_Windows(12)

demo演示 demo演示 模板stencil测试 OpenGL颜色缓冲区是用于存储渲染图像的颜色数据的内存区域&#xff0c;在每个新的渲染迭代&#xff0c;我们都将屏幕颜色清理glClearColor&#xff08;&#xff09;为我们指定的颜色&#xff0c;然后同时清除glClear()颜色缓冲区&#xff0…

《骑行健身:“柳叶刀”研究揭示的健康与经济双赢策略》

在这个物价飞涨、经济压力日益加重的时代&#xff0c;普通人如何在不增加额外负担的情况下提升生活质量&#xff1f;《柳叶刀》的最新研究为我们揭开了一个意想不到的秘密&#xff1a;坚持健身&#xff0c;尤其是骑行&#xff0c;竟等同于每年为自己赚取了一笔不小的财富。这一…

C++链表相关内容温习回顾——移除链表元素

本文主要对之前学过的C链表相关内容进行温习回顾&#xff0c;并以 移除链表元素 为例&#xff0c;进行应用。 关于链表的基础理论可见&#xff1a;链表理论基础 应用示例&#xff1a;LeetCode 203 移除链表元素 https://leetcode.cn/problems/remove-linked-list-elements/ 0、…

旋转的六边形

【题目描述】 输入一个整数n&#xff0c;绘制出n个不断旋转的六边形&#xff0c;如图1所示。 图1 旋转的六边形图形 【要求】 -绘制速度设为最快&#xff0c;画笔粗细为3。 -六边形每次旋转10度&#xff0c;边长增加10%。 【分析】 这是一个同心正六边&#xff0c;六边形边…

spring:深入理解@EnableAspectJAutoProxy

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

Airtest 使用指南

Airtest 介绍 准备工作 AirtestIDE 安装与启动: https://airtest.doc.io.netease.com/IDEdocs/getting_started/AirtestIDE_install/ 电脑端的准备工作完成后,对于手机端只需要打开允许USB调试,当首次运行时会提示安装PocoService,同意即可。 界面介绍

微信登录过程分析

文章目录 1、微信登录过程分析2、身份认证实现方案&#xff1a;3、AOP回顾3.1、AOP底层 1、微信登录过程分析 2、身份认证实现方案&#xff1a; 网关过滤器&#xff1a;gateway网关GlobalFilter自定义过滤器&#xff0c;拦截经过网关的所有请求SpringMVC拦截器&#xff1a;代码…

现货白银实时交易平台的成长阶段 你出在哪个阶段?

很多人喜欢在现货白银平台上做模拟交易&#xff0c;因为他们认为现货白银实时交易平台上交易太痛苦了&#xff0c;不光随时会面临风险&#xff0c;而且还可能让自己出现大的亏损。如果投资者认为痛苦&#xff0c;那笔者觉得投资者不妨将在现货白银实时交易平台上做交易&#xf…

0 简单的图像分类

本文主要针对交通标识图片进行分类&#xff0c;包含62类&#xff0c;这个就是当前科大讯飞比赛&#xff0c;目前准确率在0.94左右&#xff0c;难点如下&#xff1a; 1 类别不均衡&#xff0c;有得种类图片2百多&#xff0c;有个只有10个不到&#xff1b; 2 像素大小不同&…

滑动窗口(LeeCode209题,以JS为例)

什么是滑动窗口&#xff1f; 滑动窗口是算法中一种非常有用的技术&#xff0c;特别是在处理数据序列或数组时。它的核心思想是维护一个固定大小的窗口&#xff0c;这个窗口在数据序列上滑动&#xff0c;以便于在窗口内的元素上进行操作或计算。滑动窗口技术通常用于解决与数据…

对 2024 年美赛选题的建议

对2024年美赛选题的建议包括&#xff1a; 1. 深入探讨当下全球面临的重大问题和挑战&#xff1a;鉴于美赛通常聚焦于全球性议题&#xff0c;如气候变化、可持续发展、数据分析等&#xff0c;参赛学生应关注这些议题&#xff0c;并深入研究相关数据与背景信息&#xff0c;以提出…

单片机建立自己的库文件(4)

文章目录 前言一、新建自己的外设文件夹1.新建外设文件夹&#xff0c;做项目好项目文件管理2.将之前写的.c .h 文件添加到文件夹中 二、在软件中添加项目 .c文件2.1 编译工程保证没问题2. 修改项目列表下的名称 三、在软件项目中添加 .h文件路径四、实际使用测试总结 前言 提示…