JS 鼠标拖动实现移动滚动条的滚动效果

效果

现在很多场景都以移动端为基本开发,比如说需要隐藏滚动条,在pc上实现鼠标拖动和手机触摸拖动差不多的效果。

实现

以mdn的overflow属性中范例为基础,内容溢出时候可使用overflow: auto;overflow: scroll;实现滚动效果。
要实现鼠标拖动实现和移动滚动条一样的效果只需要在原例脚本部分添加如下内容:

<script>const scrollElement = document.querySelector('.scroll');//你的需要滚动的标签let isDragging = false;let startX, startY, scrollLeft, scrollTop;scrollElement.addEventListener('mousedown', (e) => {isDragging = true;startX = e.pageX - scrollElement.offsetLeft;startY = e.pageY - scrollElement.offsetTop;scrollLeft = scrollElement.scrollLeft;scrollTop = scrollElement.scrollTop;scrollElement.style.cursor = 'grabbing';});scrollElement.addEventListener('mouseleave', () => {isDragging = false;scrollElement.style.cursor = 'grab';});scrollElement.addEventListener('mouseup', () => {isDragging = false;scrollElement.style.cursor = 'grab';});scrollElement.addEventListener('mousemove', (e) => {if (!isDragging) return;e.preventDefault();const x = e.pageX - scrollElement.offsetLeft;const y = e.pageY - scrollElement.offsetTop;const walkX = (x - startX) * 2; // 调整滚动速度const walkY = (y - startY) * 2; // 调整滚动速度scrollElement.scrollLeft = scrollLeft - walkX;scrollElement.scrollTop = scrollTop - walkY;});
</script>

css部分添加:

p.scroll {overflow: scroll;cursor: grab;
}
p.scroll {cursor: grabbing; /* 鼠标按下时的指针样式 */
}

在这里插入图片描述

这时scroll标签就可以用鼠标拖着滚动了。

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

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

相关文章

华为防火墙总部与分支机构建立IPsec VPN涉及NAT穿越

一、IPsec VPN基本概念 1、隧道建立方式&#xff1a;分为手动建立和IKE自动协商&#xff0c;手动建立需要人为配置指定所有IPsec建立的所有参数信息&#xff0c;不支持为动态地址的发起方&#xff0c;实际网络中很少应用&#xff1b;IKE协议是基于密钥管理协议ISAKMP框架设计而…

一文看懂AI的 Transformer 架构!

1 AI的转换器是啥&#xff1f; 转换器&#xff0c;一种将输入序列转换或更改为输出序列的神经网络架构。它们通过学习上下文和跟踪序列组件之间的关系来做到这一点。例如&#xff0c;请考虑以下输入序列&#xff1a;“天空是什么颜色的&#xff1f;” 转换器模型会使用内部数学…

TCP协议介绍

TCP协议介绍 传输控制协议&#xff08;Transmission Control Protocol&#xff0c;TCP&#xff09;是因特网协议套件中负责提供可靠、有序和无差错数据传输的核心协议。TCP协议确保数据从一台设备传输到另一台设备时不会出现丢失、重复或顺序错误的问题。以下是对TCP协议的详细…

C4D2024软件下载+自学C4D 从入门到精通【学习视频教程全集】+【素材笔记】

软件介绍与下载&#xff1a; 链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1n8cripcv6ZTx4TBNj5N04g?pwdhfg5 提取码&#xff1a;hfg5 基础命令的讲解&#xff1a; 掌握软件界面和基础操作界面。学习常用的基础命令&#xff0c;如建模、材质、灯光、摄像机…

代码随想录算法训练营第三十四天

1049. 最后一块石头的重量 II 这道题和第三十三天的题的解法差不多&#xff0c;只不过这次不用判断dp[target]是否等于target了&#xff0c;而是求dp[target]最大是多少。这道题要求剩下石头最小的质量是多少&#xff0c;那么就把他们分成两半&#xff0c;两半的重量足够接近的…

TypeScript体操(一):从基础到进阶

目录 前言Utility Types 是什么&#xff1f;常用 Utility Types前置知识typeofkeyoftypeof 和 keyof 的区别never 关键字extends 关键字结合条件判断infer 类型推断&#xff08;模式匹配&#xff09;判断是与非判断两个类型是否相等或兼容 循环递归嵌套字符串数组协变&#xff…

NMEA2000在船舶控制系统中航空插头插座组件特性

NMEA2000在船舶控制系统中的应用概述 NMEA2000协议是船舶电子设备之间通信的国际标准&#xff0c;广泛应用于船舶导航、监控和自动化系统。它基于CAN&#xff08;Controller Area Network&#xff09;总线技术&#xff0c;以确保在恶劣环境下的可靠性和效率。NMEA2000协议定义了…

英语语法第八课副词

文章目录 1、副词分类1.1 时间副词&#xff0c;表示时间或频率1.2 地点副词&#xff0c;表示地点或位置1.3 方式副词&#xff0c;表示行为方式1.4 程度副词&#xff0c;表示动作程度1.5 疑问副词&#xff0c;引导特殊疑问句1.6 强调副词&#xff0c;强调形容词或动词1.7 连接副…

隐语隐私计算实训营「联邦学习」第 5 课:基于隐私保护的机器学习算法介绍

【隐私计算实训营】是蚂蚁集团隐语开源社区出品的线上课程&#xff0c;自实训营上线以来&#xff0c;获得行业内外广泛关注&#xff0c;吸引上千余名开发者报名参与。本次暑期夏令营课程中&#xff0c;除了最新上线的「联邦学习系列」&#xff0c;还包含了「隐私保护数据分析」…

Java项目实战springboot校园失物招领系统

✌网站介绍&#xff1a;✌10年项目辅导经验、专注于计算机技术领域学生项目实战辅导。 ✌服务范围&#xff1a;Java(SpringBoo/SSM)、Python、PHP、Nodejs、爬虫、数据可视化、小程序、安卓app、大数据等设计与开发。 ✌服务内容&#xff1a;免费功能设计、免费提供开题答辩P…

3D建模软件--犀牛Rhino for Mac

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功 三、运行测试安装完成&#xff01;&#xff01;&#xff01; 效果 一、下载软件 下载软件…

初学Mybatis之配置解析

MyBatis 中文网配置教程 mybatis-config.xml 环境配置&#xff08;environments&#xff09; 尽管可以配置多个环境&#xff0c;但每个 SqlSessionFactory 实例只能选择一种环境 可以有多个 enviroment&#xff0c;但是 enviroments default&#xff08;默认&#xff09;只…

玩转springboot之springboot启动原理

启动原理 注意&#xff1a;使用版本为spring-boot-2.2.2.RELEASE springboot启动的入口肯定是main方法啦&#xff0c;那就从main方法入口走起来看看是如何进行启动的 SpringBootApplication public class ConsulApp {public static void main(String[] args) {// 调用SpringAp…

动态规划题目:单词拆分/三角形最小路径和 - leetcode

动态规划思想 / 步骤 &#xff1a; 先将 当前要求 总结成一个 精炼的 小问题 &#xff0c; 然后 将 求解题目 转换为 求解N个 小问题 &#xff0c; 每个小问题的 求解过程相同 &#xff0c;但是 过程涉及 的 数据 是不同的 &#xff0c; 例如第三个 小问…

c++网络编程实战——开发基于ftp协议的文件传输模块(二) 配置ftp服务与手动执行ftp命令

配置FTP服务 一.前言 博主的环境是阿里云服务器&#xff0c;操作系统版本为 ubuntu20.04,一下所有操作都基于以上环境下进行的操作&#xff0c;同时为了简化操作我将开放同一个云服务器的不同端口&#xff0c;让它同时充当服务端和客户端&#xff0c;大家如果想测试效果更好且…

[web]-反序列化-base64

看到源码 <?php error_reporting(0); class A {public $contents "hello ctfer";function __toString(){if ((preg_match(/^[a-z]/i,$this->contents))) {system("echo $this->contents");return 111;}else{return "...";}} }functi…

Zookeeper集群中节点之间数据是如何同步的

1.首先集群启动时&#xff0c;会先进行领导者选举&#xff0c;确定哪个节点是Leader&#xff0c;哪些节点是Follower和Observer 2.然后Leader会和其他节点进行数据同步&#xff0c;采用发送快照和发送Diff日志的方式 3.集群在工作过程中&#xff0c;所有的写请求都会交给Lead…

ImageView实现原理分析

ImageView 是 Android 中用于显示图片的一个基本视图组件。它继承自 View 类&#xff0c;并且可以用来展示静态的图像资源&#xff0c;如位图、动画 GIF、矢量图形等。下面我们将结合源码分析 ImageView 的实现原理。 1. 构造方法与初始化 ImageView 的构造方法和其他 View 子…

WPF串口通讯程序

目录 一 设计原型 二 后台源码 一 设计原型 二 后台源码 using HardwareCommunications; using System.IO.Ports; using System.Windows;namespace PortTest {/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainW…

怀庄之醉是勾兑酒吗?

关于“怀庄之醉是否是勾兑酒”的问题&#xff0c;需要从多个角度进行分析。 勾兑酒在白酒生产中是一个广泛存在的工艺过程&#xff0c;它并非贬义词&#xff0c;而是指将不同口味、不同生产时间、不同度数的纯粮食酒&#xff0c;或固态法白酒与液态法白酒、食用酒精等&#xff…