当前位置: 首页 > news >正文

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

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

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

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

代码如下:

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

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

在这里插入图片描述

相关文章:

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

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 在项目中我们可能会遇到当鼠标在某个区域内&#xff0c;我们希望滚动鼠标里面的内容可以横向滚动&#xff1b; 比如我们一些常见的后台状态栏&#xff1a; 那这种该怎么写&…...

Flink集群架构

在上一章节我们对flink有了一个基本的了解。从它的应用的场景以及它的一些基本的一些核心的一些概念。从本章节开始&#xff0c;我们对flink从它的一个集群的一个架构以及它的一个部署模式着手&#xff0c;去了解flink如何去部署在不同的这样的一个集群的一些资源管理器上面&am…...

计算机网络(6) UDP协议

一.UDP数据报格式 UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;是一种简单的传输层协议&#xff0c;与TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;相比&#xff0c;UDP提供一种无连接、不可靠的数据传…...

单片机(STM32)与上位机传输浮点数

目录 单片机(STM32)与上位机传输数据的方法1. 传输整形数据2. 传输浮点数据3. 如何打包与解包 单片机(STM32)与上位机传输数据的方法 在进行单片机程序的开发时&#xff0c;常常需要与其他设备进行通信。一种情况是与其他电路板通信&#xff0c;比如STM32主机与STM32从机通信&…...

50etf期权交易规则杠杆怎么计算?

今天带你了解50etf期权交易规则杠杆怎么计算&#xff1f;近年来&#xff0c;期权交易在股票市场中变得愈发流行&#xff0c;其中50ETF期权备受关注。作为一种金融衍生品&#xff0c;50ETF期权为投资者提供了更灵活的投资方式和更多的策略选择。 50etf期权交易规则杠杆怎么计算&…...

鸿蒙: 基础认证

先贴鸿蒙认证 官网10个类别总结如下 https://developer.huawei.com/consumer/cn/training/dev-cert-detail/101666948302721398 10节课学习完考试 考试 90分合格 3次机会 1个小时 不能切屏 运行hello world hvigorfile.ts是工程级编译构建任务脚本 build-profile.json5是工程…...

2024年最佳插电式混合动力电动汽车

对电动汽车充满好奇和环保意识的司机们还没有准备好跨入纯电动汽车&#xff0c;他们可以找到一个折衷方案&#xff0c;即插电式混合动力车。 在过去的16年里&#xff0c;我一直在把握汽车行业的脉搏。试驾数百辆汽车、电动汽车、插电式混合动力车&#xff0c;跟踪汽车行业的新闻…...

上海交通大学、中科大 开源镜像站停止 Docker Hub 仓库镜像支持后的可用替代源

上海交通大学 Linux 用户组发布公告&#xff1a; 即时起中止对 Docker Hub 仓库的镜像。Docker 相关工具默认会自动处理失效镜像的回退&#xff0c;如果对官方源有访问困难问题&#xff0c;建议尝试使用其他仍在服务的镜像源。 源加速地址 有网友表示百度的 Docker Hub 加速器…...

【Linux】shell——条件判断test,各种运算符,expr

条件判断——test 真——0 假——1 test expression or [ expression ] 整数运算符 字符串运算符 -z 长度是否为0 -n 长度是否不为0 str1 str2 str1 ! str2 补 &&-->逻辑与&#xff0c;前面为真后面才会执行 || -->逻辑或&#xff0c;前面为假后面才…...

中介子方程二十二

X$XFX$XdXuXWXπX$XWXeXyXeXyXeXWX$XπXWXuXdX$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXπX$XWXeXyXeXyXeXWX$XπXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXπX$XWXeXyXeXyXeXWX$XπXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$…...

你还不会选ProfiNET和EtherCAT网线?

在现代工业自动化领域&#xff0c;ProfiNET和EtherCAT是两种非常流行的通信协议。选择合适的网线对于确保通信的稳定性和效率至关重要。 ProfiNET是什么&#xff1f; ProfiNET是一种基于以太网的通信协议&#xff0c;由德国西门子公司开发。它支持实时通信&#xff0c;广泛应用…...

醉美酒话:承载着深厚文化底蕴的敬酒词

这些敬酒词凝聚了中华酒文化的精髓&#xff0c;每一句都体现了对美好愿景的深深祝愿&#xff0c;同时也展示了中文语言的丰富与魅力。 一、“步步高升”酒&#xff1a; 第一杯&#xff0c;酒至三分&#xff0c;象征着龙洒点滴、财运将至。我衷心祝愿您财富如江水般滚滚而来&a…...

vue3-sfc-loader动态加载一个异步vue组件生成cesium画面

在 Vue.js 3 中&#xff0c;使用 vue3-sfc-loader 可以动态加载异步的 Vue 单文件组件&#xff08;.vue 文件&#xff09;。这个工具允许你在运行时根据需要加载和解析 .vue 文件&#xff0c;使得组件的加载变得更加灵活和动态。 下面是一个简单的示例&#xff0c;演示如何使用…...

flink学习-状态管理

状态管理 在flink中&#xff0c;算子可以分为无状态和有状态两种情况。 无状态的算子只需要观察每个独立事件&#xff0c;根据当前输入的数据直接输出结果。像&#xff1a;filter、flatMap、map都属于无状态的算子。 有状态的算子则是除当前数据之外&#xff0c;还需要一些其他…...

OpenCV图像算术位运算

一 图像相加 import cv2 import numpy as npgirlcv2.imread(./2037548.jpg)#图像的加法运算就是矩阵的加法运算 #因此加法运算的两张图必须是相等的print(girl.shape)imgnp.ones((1920,1080,3),np.uint8)*50 cv2.imshow(girl,girl) resultcv2.add(girl,img) cv2.imshow(result…...

【调试笔记-20240611-Linux-配置 OpenWrt-23.05 支持泛域名 acme 更新】

调试笔记-系列文章目录 调试笔记-20240611-Linux-配置 OpenWrt-23.05 支持泛域名 acme 更新 文章目录 调试笔记-系列文章目录调试笔记-20240611-Linux-配置 OpenWrt-23.05 支持泛域名 acme 更新 前言一、调试环境操作系统&#xff1a;Windows 10 专业版调试环境调试目标 二、调…...

ssm宠物网站系统-计算机毕业设计源码07183

摘 要 在信息飞速发展的今天&#xff0c;网络已成为人们重要的信息交流平台。宠物网站每天都有大量的信息需要通过网络发布&#xff0c;为此&#xff0c;本人开发了一个基于B/S&#xff08;浏览器/服务器&#xff09;模式的宠物网站系统。 该系统以JJava编程语言、MySQL和SSM框…...

想上币的项目方怎么去选择交易所

在区块链和加密货币蓬勃发展的今天&#xff0c;许多项目方都渴望通过交易所上线其代币&#xff0c;以扩大影响力、提升流动性和市场认可度。然而&#xff0c;选择合适的交易所并非易事&#xff0c;它关乎项目的未来发展和市场地位。那么&#xff0c;对于有上币意向的项目来说&a…...

mysql如何创建并执行事件?

在 MySQL 中,事件调度器允许您在指定的时间间隔执行 SQL 语句。这类似于操作系统中的计划任务(如 cron 作业)。 前提条件 确保您的 MySQL 服务器已启用事件调度器。可以通过以下命令检查并启用: SHOW VARIABLES LIKE event_scheduler;如果返回的值是 OFF,可以通过以下命…...

k8s环境里查看containerd创建的容器对应的netns

如何查看containerd创建的容器对应的netns 要查看由 containerd 创建的容器对应的网络命名空间&#xff08;netns&#xff09;&#xff0c;你可以遵循以下步骤。这个过程涉及到了解容器的 ID&#xff0c;以及使用 ctr 命令或其他方式来检索容器的详细信息。这里假定你已经具备…...

学习笔记——网络管理与运维——SNMP(基本配置)

四、SNMP基本配置 1、SNMP配置举例 整个华为数通学习笔记系列中&#xff0c;本人是以网络视频与网络文章的方式自学的&#xff0c;并按自己理解的方式总结了学习笔记&#xff0c;某些笔记段落中可能有部分文字或图片与网络中有雷同&#xff0c;并非抄袭。完处于学习态度&#x…...

CMake从安装到精通

目录 引言 1. CMake的安装 2. CMake的原理 3. CMake入门 3.1 CMakeLists.txt与注释 3.2 版本指定与工程描述 3.3 生成可执行程序 3.4 定义变量与指定输出路径 3.5 指定C标准 3.6 搜索文件 3.7 包含头文件 4. CMake进阶 4.1 生成动静态库 4.2 链接动静态库 4.…...

【C++】认识STL

【C】认识STL STL的概念STL的版本STL的六大组件STL的三个境界STL的缺陷 STL的概念 SLT(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个保罗数据结构与算法的软件框架。 STL的版本 原…...

力扣 50.pow(x,n)

class Solution { public: double quickMul(double x,long long N){ if(N0) return 1; double valuequickMul(x,N/2); return N%20?value*value:value*value*x; } double myPow(double x, int n) { long long Nn; return N>0?quickMul(x, N):1.0/quickMul(x, N); } };...

R可视化:微生物相对丰度或富集热图可视化

欢迎大家关注全网生信学习者系列: WX公zhong号:生信学习者Xiao hong书:生信学习者知hu:生信学习者CDSN:生信学习者2介绍 热图(Heatmap)是一种数据可视化方法,它通过颜色的深浅或色调的变化来展示数据的分布和密度。在微生物学领域,热图常用于表示微生物在不同分组(如…...

Unity Maximum Allowed Timestep的说明

Maximum Allowed Timestep的说明 关于Maximum Allowed Timestep这个配置的说明&#xff0c;Unity有一份官方的说明。 Time-maximumDeltaTime - Unity 脚本 API 结合Unity的函数执行顺序&#xff0c;我们可以简单理解为&#xff1a; FixedUpdate在1次Update可能会执行N次&am…...

长短期记忆神经网络(LSTM)的回归预测(免费完整源代码)【MATLAB】

LSTM&#xff08;Long Short-Term Memory&#xff0c;长短期记忆网络&#xff09;是一种特殊类型的递归神经网络&#xff08;RNN&#xff09;&#xff0c;专门用于处理和预测基于时间序列的数据。与传统RNN相比&#xff0c;LSTM在处理长期依赖问题时具有显著优势。 LSTM的基本…...

关于 python request 的 response 返回 b‘\xa3\xff\xff\x11E .....‘ 类型的数据的解决方案

最近写开发一个爬虫&#xff0c; 程序在本地好好的&#xff0c;返回的是正常的 html&#xff0c; 但是到了生产环境&#xff0c;不知道为什么返回的是一堆乱码 长这样&#xff1a; 查了好几天都没有进展&#xff0c; 对其进行各种转码均无效 今天终于找到解决办法了&#xff…...

后端高频面试题分享-用Java判断一个列表是否是另一个列表的顺序子集

问题描述 编写一个函数&#xff0c;该函数接受两个列表作为参数&#xff0c;判断第一个列表是否是第二个列表的顺序子集&#xff0c;返回True或False。 要求 判断一个列表是否是另一个列表的顺序子集&#xff0c;即第一个列表的所有元素在第二个列表需要顺序出现。列表中的元…...

【数据初步变现】论自助BI在数字化转型中如何赋能业务

引言&#xff1a;数字化转型要求企业更加依赖数据来指导业务决策。自助BI作为数据分析的重要工具&#xff0c;能够迅速、准确地从海量数据中提取有价值的信息&#xff0c;为企业的战略规划和业务执行提供有力支持。在数字化时代&#xff0c;企业需要快速响应市场变化并优化业务…...

做海报哪个网站好/吴忠seo

2019独角兽企业重金招聘Python工程师标准>>> 环境: 操作系统: Linux version 2.6.32-696.10.1.el6.x86_64 (mockbuildc1bl.rdu2.centos.org) (gcc version 4.4.7 20120313 (Red Hat 4.4.7-18) (GCC) ) #1 SMP Tue Aug 22 18:51:35 UTC 2017 tomcat: tomca…...

有哪些网站用java做的/apple私人免费网站怎么下载

混合云被称为是企业信息化的未来&#xff0c;但是对于大多数企业来说&#xff0c;混合云落地难点重重。如何跨越各种挑战&#xff0c;解决企业信息化的最后一公里问题&#xff1f;本文提炼了混合云落地的几大关键点。1、体系架构无论微服务、UI还是脚本配置&#xff0c;花足够的…...

大型网站建设流程/网络服务器

1. 一条数学公式&#xff1a;如果有 a%bc, 则有 (akb)%bc(k 为非零整数) 2. 用途&#xff1a;求解一次线性同余方程组&#xff0c;需要将模数转化为素数来求解的题目 3. 核心&#xff1a;求 (N/mi)∗yi≡1(mod mi) 中的yi --》 扩展欧几里得 --》 看成 yi(N/m1)q⋅m11 &#…...

网站建设过程心得体会/江苏网站推广公司

比如你用local在栈上定义了一个局部变量LocalVar&#xff0c;你知道实际的指令是什么么&#xff1f;一般都差不多像下面的样子&#xff1a; push ebp mov esp, ebp sub esp, 4 现在栈上就有了4各字节的空间&#xff0c;这就是你的局部变量。 接下来&#x…...

域名网站都有怎么进去建设/建站工具有哪些

2019独角兽企业重金招聘Python工程师标准>>> 花了一下午的时间&#xff0c;整理测试了一下Bean的生命周期行为. 首先排一个序。完整的测试代码后面贴出来。 加载当前Bean的构造器 加载Autowired注入的依赖关系的构造器。&#xff08;也就是加载依赖的Bean&#x…...

档案馆建设网站/新闻最新热点

Runtime类图分析 Text继承了MaskableGraphic, ILayoutElement 关联重要类 FontData类 是一个字体配置类&#xff0c;继承了ISerializationCallbackReceiver接口&#xff0c;这个接口需要实现OnBeforeSerialize和OnAfterDeserialize两个方法&#xff0c;它们分别会在序列化之前…...