一行代码实现鼠标横向滚动
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
在项目中我们可能会遇到当鼠标在某个区域内,我们希望滚动鼠标里面的内容可以横向滚动;
比如我们一些常见的后台状态栏:

那这种该怎么写?请看栗子


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

相关文章:
一行代码实现鼠标横向滚动
🧑💻 写在开头 点赞 收藏 学会🤣🤣🤣 在项目中我们可能会遇到当鼠标在某个区域内,我们希望滚动鼠标里面的内容可以横向滚动; 比如我们一些常见的后台状态栏: 那这种该怎么写&…...
Flink集群架构
在上一章节我们对flink有了一个基本的了解。从它的应用的场景以及它的一些基本的一些核心的一些概念。从本章节开始,我们对flink从它的一个集群的一个架构以及它的一个部署模式着手,去了解flink如何去部署在不同的这样的一个集群的一些资源管理器上面&am…...
计算机网络(6) UDP协议
一.UDP数据报格式 UDP(User Datagram Protocol,用户数据报协议)是一种简单的传输层协议,与TCP(Transmission Control Protocol,传输控制协议)相比,UDP提供一种无连接、不可靠的数据传…...
单片机(STM32)与上位机传输浮点数
目录 单片机(STM32)与上位机传输数据的方法1. 传输整形数据2. 传输浮点数据3. 如何打包与解包 单片机(STM32)与上位机传输数据的方法 在进行单片机程序的开发时,常常需要与其他设备进行通信。一种情况是与其他电路板通信,比如STM32主机与STM32从机通信&…...
50etf期权交易规则杠杆怎么计算?
今天带你了解50etf期权交易规则杠杆怎么计算?近年来,期权交易在股票市场中变得愈发流行,其中50ETF期权备受关注。作为一种金融衍生品,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年最佳插电式混合动力电动汽车
对电动汽车充满好奇和环保意识的司机们还没有准备好跨入纯电动汽车,他们可以找到一个折衷方案,即插电式混合动力车。 在过去的16年里,我一直在把握汽车行业的脉搏。试驾数百辆汽车、电动汽车、插电式混合动力车,跟踪汽车行业的新闻…...
上海交通大学、中科大 开源镜像站停止 Docker Hub 仓库镜像支持后的可用替代源
上海交通大学 Linux 用户组发布公告: 即时起中止对 Docker Hub 仓库的镜像。Docker 相关工具默认会自动处理失效镜像的回退,如果对官方源有访问困难问题,建议尝试使用其他仍在服务的镜像源。 源加速地址 有网友表示百度的 Docker Hub 加速器…...
【Linux】shell——条件判断test,各种运算符,expr
条件判断——test 真——0 假——1 test expression or [ expression ] 整数运算符 字符串运算符 -z 长度是否为0 -n 长度是否不为0 str1 str2 str1 ! str2 补 &&-->逻辑与,前面为真后面才会执行 || -->逻辑或,前面为假后面才…...
中介子方程二十二
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网线?
在现代工业自动化领域,ProfiNET和EtherCAT是两种非常流行的通信协议。选择合适的网线对于确保通信的稳定性和效率至关重要。 ProfiNET是什么? ProfiNET是一种基于以太网的通信协议,由德国西门子公司开发。它支持实时通信,广泛应用…...
醉美酒话:承载着深厚文化底蕴的敬酒词
这些敬酒词凝聚了中华酒文化的精髓,每一句都体现了对美好愿景的深深祝愿,同时也展示了中文语言的丰富与魅力。 一、“步步高升”酒: 第一杯,酒至三分,象征着龙洒点滴、财运将至。我衷心祝愿您财富如江水般滚滚而来&a…...
vue3-sfc-loader动态加载一个异步vue组件生成cesium画面
在 Vue.js 3 中,使用 vue3-sfc-loader 可以动态加载异步的 Vue 单文件组件(.vue 文件)。这个工具允许你在运行时根据需要加载和解析 .vue 文件,使得组件的加载变得更加灵活和动态。 下面是一个简单的示例,演示如何使用…...
flink学习-状态管理
状态管理 在flink中,算子可以分为无状态和有状态两种情况。 无状态的算子只需要观察每个独立事件,根据当前输入的数据直接输出结果。像:filter、flatMap、map都属于无状态的算子。 有状态的算子则是除当前数据之外,还需要一些其他…...
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 更新 前言一、调试环境操作系统:Windows 10 专业版调试环境调试目标 二、调…...
ssm宠物网站系统-计算机毕业设计源码07183
摘 要 在信息飞速发展的今天,网络已成为人们重要的信息交流平台。宠物网站每天都有大量的信息需要通过网络发布,为此,本人开发了一个基于B/S(浏览器/服务器)模式的宠物网站系统。 该系统以JJava编程语言、MySQL和SSM框…...
想上币的项目方怎么去选择交易所
在区块链和加密货币蓬勃发展的今天,许多项目方都渴望通过交易所上线其代币,以扩大影响力、提升流动性和市场认可度。然而,选择合适的交易所并非易事,它关乎项目的未来发展和市场地位。那么,对于有上币意向的项目来说&a…...
mysql如何创建并执行事件?
在 MySQL 中,事件调度器允许您在指定的时间间隔执行 SQL 语句。这类似于操作系统中的计划任务(如 cron 作业)。 前提条件 确保您的 MySQL 服务器已启用事件调度器。可以通过以下命令检查并启用: SHOW VARIABLES LIKE event_scheduler;如果返回的值是 OFF,可以通过以下命…...
k8s环境里查看containerd创建的容器对应的netns
如何查看containerd创建的容器对应的netns 要查看由 containerd 创建的容器对应的网络命名空间(netns),你可以遵循以下步骤。这个过程涉及到了解容器的 ID,以及使用 ctr 命令或其他方式来检索容器的详细信息。这里假定你已经具备…...
Qt 委托模式实战:QItemDelegate 赋能 QTableView 单元格交互控件
1. 为什么需要委托模式 在Qt开发中,表格视图(QTableView)是最常用的数据展示控件之一。但很多开发者都遇到过这样的困扰:当我们需要在表格单元格中嵌入交互控件时,直接调用setIndexWidget方法会导致控件始终显示,不仅影响界面美观…...
uni-number-box深度解析:从基础属性到高级双向绑定实战
1. uni-number-box基础入门:从零开始玩转数字输入框 第一次接触uni-number-box时,我也觉得这不就是个简单的数字加减控件吗?直到在电商项目中真正用起来,才发现这个看似简单的组件藏着不少门道。uni-number-box是uni-app框架提供的…...
AI时代数据中心架构变革:从计算中心到加速基础设施
1. 从“计算中心”到“加速基础设施”:数据中心架构的范式转移最近和几个在头部云厂商做架构设计的老朋友聊天,话题总绕不开一个词:加速基础设施。这词儿听起来挺高大上,但说白了,就是咱们传统数据中心那套“通用计算存…...
FanControl完整指南:3步掌握Windows风扇控制,告别噪音烦恼
FanControl完整指南:3步掌握Windows风扇控制,告别噪音烦恼 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/Git…...
Python全栈实战:前后端分离开发核心要点
后端API搭建FastAPI与Flask是Python全栈开发的主流后端框架选择。两者均支持RESTful API开发,但适用场景不同:FastAPI代码示例(高性能方案):from fastapi import FastAPI app FastAPI()app.get("/items/{item_id…...
从日偏食图像处理开始:手把手在VS2019里跑通你的第一个OpenCV 4.3程序
从日偏食图像处理开始:手把手在VS2019里跑通你的第一个OpenCV 4.3程序 当那张日偏食照片第一次在屏幕上成功显示时,仿佛打开了计算机视觉的大门。本文将带你从零开始,用VS2019和OpenCV 4.3实现这个充满仪式感的"Hello World"——不…...
从微波炉到激光加工:手把手教你用COMSOL搞定4种电磁加热的仿真设置
从微波炉到激光加工:COMSOL电磁加热仿真实战指南 电磁加热技术早已渗透进现代工业与生活的每个角落——从家用微波炉的磁控管震荡,到新能源汽车电池的感应焊接,再到精密医疗器械的激光切割。这些看似迥异的应用背后,都遵循着相同…...
如何快速掌握ComfyUI图像修复插件:终极完整使用指南
如何快速掌握ComfyUI图像修复插件:终极完整使用指南 【免费下载链接】comfyui-inpaint-nodes Nodes for better inpainting with ComfyUI: Fooocus inpaint model for SDXL, LaMa, MAT, and various other tools for pre-filling inpaint & outpaint areas. 项…...
智能开关总是断连?7 个行之有效的解决方法
三星智能切换(Samsung Smart Switch)是一款官方且易于使用的工具,专为三星用户设计,用于在移动设备之间或手机与电脑之间传输照片、联系人、应用程序、短信和其他数据。它支持无线 Wi-Fi 连接和有线 USB 连接,为数据迁…...
解锁智能告警管理:Keep开源AIOps平台从零到生产实战指南
解锁智能告警管理:Keep开源AIOps平台从零到生产实战指南 【免费下载链接】keep The open-source AIOps and alert management platform 项目地址: https://gitcode.com/GitHub_Trending/kee/keep 在当今复杂的云原生环境中,运维团队每天都要面对海…...
