当前位置: 首页 > 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 命令或其他方式来检索容器的详细信息。这里假定你已经具备…...

OpenSceneGraph 3.6.5 源码编译实战:从依赖配置到项目集成的完整指南

1. 环境准备&#xff1a;搭建编译OSG的基础舞台 在开始编译OpenSceneGraph 3.6.5之前&#xff0c;我们需要先搭建好开发环境。就像盖房子需要打好地基一样&#xff0c;环境配置决定了后续编译过程的顺利程度。我曾在多个项目中编译过不同版本的OSG&#xff0c;发现环境配置不当…...

告别龟速下载!用阿里云Maven仓库和离线驱动包,5分钟搞定DBeaver所有JDBC驱动配置

极速配置DBeaver JDBC驱动的双轨方案&#xff1a;阿里云Maven加速与离线整合包实战 每次打开DBeaver准备连接数据库时&#xff0c;看着进度条缓慢爬升的驱动下载界面&#xff0c;你是否也感到焦虑&#xff1f;特别是在紧急排查生产环境问题的关键时刻&#xff0c;这种等待简直让…...

Vex:VS Code向量数据库管理扩展,提升AI开发效率

1. 项目概述&#xff1a;Vex&#xff0c;一个为开发者设计的向量数据库管理利器如果你正在用 VS Code 开发 AI 应用&#xff0c;并且和向量数据库&#xff08;比如 Milvus 或 ChromaDB&#xff09;打交道&#xff0c;那你大概率经历过这样的场景&#xff1a;为了插入几条测试向…...

PyTorch模型参数管理:从torch.nn.Parameter到高效训练实践

1. 理解torch.nn.Parameter的本质 第一次接触PyTorch的torch.nn.Parameter时&#xff0c;我也曾困惑它和普通Tensor的区别。直到在实际项目中踩了几个坑&#xff0c;才真正明白它的价值。让我们从一个简单的例子开始&#xff1a; import torch import torch.nn as nn# 普通Te…...

当三维基因组“打结”:从罕见病到癌症,那些被折叠改变的生命密码

当三维基因组“打结”&#xff1a;从罕见病到癌症&#xff0c;那些被折叠改变的生命密码 想象一下&#xff0c;如果把人类基因组比作一条长达两米的毛线&#xff0c;它需要被精巧地折叠进直径仅几微米的细胞核中。这种看似不可能的折叠并非随机——它遵循着严格的拓扑规则&…...

5分钟快速上手:智能象棋AI助手的完整使用教程

5分钟快速上手&#xff1a;智能象棋AI助手的完整使用教程 【免费下载链接】VinXiangQi Xiangqi syncing tool based on Yolov5 / 基于Yolov5的中国象棋连线工具 项目地址: https://gitcode.com/gh_mirrors/vi/VinXiangQi Vin象棋是一款基于YOLOv5深度学习的开源免费中国…...

AC鸭的训练分组

题目描述 AC鸭准备参加一次训练营&#xff0c;一共有 n 个训练项目&#xff0c;第 i 个项目需要花费 ai​ 分钟。 训练老师要求 AC鸭按顺序完成所有项目&#xff0c;并且可以把这些项目分成不超过 m 组。每一组必须是连续的一段项目&#xff0c;同一组项目在同一天完成。 AC…...

别再瞎点了!Fluent标准k-ε湍流模型仿真,从导入模型到开始计算的保姆级避坑指南

Fluent标准k-ε湍流模型仿真&#xff1a;从模型导入到成功计算的避坑实战指南 第一次打开Fluent准备进行标准k-ε湍流模型仿真时&#xff0c;那种既兴奋又忐忑的心情我至今记忆犹新。作为CFD领域的经典入门案例&#xff0c;k-ε模型看似简单&#xff0c;却暗藏不少新手容易踩中…...

Python3.8环境下的OpenOPC实战:从模拟服务器搭建到KEPServerEX数据读写一条龙

Python3.8环境下的OpenOPC实战&#xff1a;从模拟服务器搭建到KEPServerEX数据读写全流程指南 工业自动化领域的数据采集一直是开发者需要掌握的核心技能之一。对于没有硬件设备或OPC服务器许可的学习者来说&#xff0c;如何在本地搭建完整的测试环境成为入门的第一道门槛。本文…...

如何通过开源自动化工具优化《明日方舟》基建管理效率

如何通过开源自动化工具优化《明日方舟》基建管理效率 【免费下载链接】arknights-mower 《明日方舟》长草助手 项目地址: https://gitcode.com/gh_mirrors/ar/arknights-mower 在《明日方舟》的长期游戏过程中&#xff0c;基建管理往往成为玩家需要频繁处理的核心环节。…...