实现滚动穿透,保留原本元素的事件,仅实现滚动穿透

 网络上都是一堆解决滚动穿透的,却没有一条是实现滚动穿透的方案。

小程序或者某些组件会有滚动穿透,但是如果是自己要造轮子,在某些场景下就需要去实现滚动穿透。比如我打开一个可滑动的弹框,在弹框上打开一个可滑动的组件,但是这个可滑动的组件在弹框的底部,高度不确定且又要让这个可滑动组件定位到弹框子item下面,这样子可能会导致这个可滑动组件的位置被底部遮挡或位置无法调整,无法滚动父级实现组件位置的调整,造成体验低下。

这里滚动穿透的核心就是:

        1、position: fixed;保证元素覆盖父级

        2、pointer-events: none;取消这个元素的事件实现事件穿透,但因为pointer-events没有单独指定某个事件,所以要js支持

        3、监听鼠标滚轮事件,滚动时才添加pointer-events: none;,不滚动就取消添加。

简单代码示例: 

<!--* @轮子的作者: 轮子哥* @Date: 2023-12-15 10:14:35* @LastEditTime: 2023-12-15 14:43:16
-->
<div class="container"><div class="item">我是父级虚拟滑动列表</div><div class="item">我是父级虚拟滑动列表</div><div class="item"><div class="mask" onclick="writess()">实现滚动穿透(遮罩层),尝试在此遮罩区域滚动试试。</div><div class="maskOv"><div class="maskItem">我是根据父级item定位的模拟滑动下拉框</div><div class="maskItem">我是根据父级item定位的模拟滑动下拉框</div><div class="maskItem">我是根据父级item定位的模拟滑动下拉框</div><div class="maskItem">我是根据父级item定位的模拟滑动下拉框</div><div class="maskItem">我是根据父级item定位的模拟滑动下拉框</div><div class="maskItem">我是根据父级item定位的模拟滑动下拉框</div><div class="maskItem">我是根据父级item定位的模拟滑动下拉框</div><div class="maskItem">我是根据父级item定位的模拟滑动下拉框</div><div class="maskItem">我是根据父级item定位的模拟滑动下拉框</div></div></div><div class="item">我是父级虚拟滑动列表</div><div class="item">我是父级虚拟滑动列表</div><div class="item">我是父级虚拟滑动列表</div><div class="item">我是父级虚拟滑动列表</div><div class="item">我是父级虚拟滑动列表</div><div class="item">我是父级虚拟滑动列表</div><div class="item">我是父级虚拟滑动列表</div><div class="item">我是父级虚拟滑动列表</div>
</div>
<div class="writeDom"></div><style>.container {position: relative;overflow: scroll;height: 500px;background: red;}.mask {position: fixed;top: 0;left: 0;width: 50%;height: 100%;background-color: #32323229;z-index: 1;text-align: center;line-height: 500px;color: blue;}.scrolled {pointer-events: none;}.item {position: relative;height: 150px;background-color: aqua;margin: 10px;}.maskOv {overflow: auto;height: 200px;position: absolute;z-index: 2;width: 400px;}.maskItem {position: relative;height: 50px;background-color: rgb(207, 233, 62);margin: 10px;}
</style>
<script>var mask = document.querySelector(".mask");let timer = null;//监听滚动mask.addEventListener("wheel", function (event) {mask.classList.add("scrolled");if (timer) {clearTimeout(timer);timer = setTimeout(() => {timer = null;mask.classList.remove("scrolled");}, 300)} else {timer = setTimeout(() => {timer = null;mask.classList.remove("scrolled");}, 300)}});let writeDom = document.querySelector(".writeDom");function writess() {console.log("点击触发,保留其它事件,仅实现滚动穿透")writeDom.innerHTML = "点击触发,保留其它事件,仅实现滚动穿透" + new Date()}</script>

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

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

相关文章

sourcetree使用详解

介绍 SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端管理工具&#xff0c;同时也是Mn版本控制系统工具。支持创建、克隆、提交、push、pull 和合并等操作。——百度百科 是一款比较好用的图形化GUI的git、hg管理工具。还有一些其他的可视化代码管理工具&#x…

vivado约束方法7

输出延迟 与“输入延迟”步骤类似&#xff0c;“定时约束”向导分析所有输出的路径端口&#xff0c;以识别其在设计内部的源时钟及其活动边缘。模板选择规则与输入延迟中描述的相同。下图显示了几个由向导提出并由用户部分编辑的输出约束。 对于每个约束&#xff0c;可以编辑三…

zync spi flash 频率配置

spi flash的频率配置 代码流程及最终的频率值。 驱动目录 基于4.14.55 内核&#xff0c; \drivers\spi\spi-dw-fmsh.c (控制器) \drivers\spi\spi-dw.c \drivers\mtd\devices\m25p80.c &#xff08;设备&#xff09; \drivers\spi\spi.c spi dts配置说明 spi0: spie000100…

2. 学成在线 - 项目搭建

文章目录 一、基础工程搭建1.1 构建父工程1.2 构建基础工程 二、数据库环境2.1 内容管理content数据库 三、模块需求分析介绍四、部署前端和系统管理服务 一、基础工程搭建 整个项目分为三大类工程&#xff1a;父工程、基础工程 和微服务工程。 父工程&#xff1a;xuecheng-pl…

Android Studio 实现音乐播放器

目录 一、引言 视频效果展示&#xff1a; 1.启动页效果 2.登录页效果 3.注册页效果 4.歌曲列表页效果 5.播放页效果 二、详细设计 1.登陆注册功能 2.音乐列表页面 2.音乐播放功能 三、源码获取 一、引言 Android初学者开发第一个完整的实例项目应该就属《音乐播放器…

半导体:Gem/Secs基本协议库的开发(4)

继续接上篇 《半导体&#xff1a;Gem/Secs基本协议库的开发&#xff08;3&#xff09;》&#xff0c;本篇我们分享的比较简单&#xff0c;windows系统下tcp和串口通讯。这也是我们协议开发比较重要的一部分&#xff0c;不过我们在此把它封装程一个单独的通讯库&#xff0c;毕竟…

Docker中的常见命令

Docker开机自启 systemctl enable dockerDocker容器开机自启 docker update --restartalways [容器名/容器id]案例&#xff1a;docker操作nginx 拉取Nginx镜像 docker pull nginx查看镜像 docker images创建并运行Nginx容器 docker run -d --name nginx -p 80:80 nginx查…

LT8711HE方案《任天堂Switch底座方案》

LT8711HE Type-c转HDMI方案 LT8711HE是高性能的Type-C/DP1.2转HDMI2.0转换器&#xff0c;设计用于连接 USB Type-C 源或 DP1.2 源到 HDMI2.0 接收器。该LT8711HE集成了符合 DP1.2 标准的接收器和符合 HDMI2.0 标准的发射器。此外&#xff0c;两个 CC 控制器是包括用于 CC 通信以…

python matplotlib 三维图形添加文字且不随图形变动而变动

要在三维图形中添加文字并使其不随图形变动而变动&#xff0c;可以使用 annotate() 方法。这个方法可以在三维图形中添加文字&#xff0c;并且可以指定文字的位置、对齐方式和字体大小等属性。 下面是一个示例代码&#xff0c;演示如何在三维图形中添加文字&#xff1a; impo…

1.6 实战:Postman请求Get接口-获取用于登录的图形验证码

上一小节我们学习了Postman的布局,对Postman有了一个整体的认知,本小节我们就来实操一下Get接口。 我们打开Postman,点击我们之前创建的请求”获取登录页验证码“。我们在地址栏里填入获取登录页验证码的接口地址。怎么查看这个接口地址呢?我们打开校园二手交易系统,打开…

Leetcode—2414.最长的字母序连续子字符串的长度【中等】

2023每日刷题&#xff08;六十&#xff09; Leetcode—2414.最长的字母序连续子字符串的长度 实现代码 class Solution { public:int longestContinuousSubstring(string s) {int ans 1;int t 1;for(int i 1; i < s.size(); i) {if(s[i] - s[i - 1] 1) {t;ans max(an…

师兄啊师兄第二季开播:男主成海神?玄机是懂联动的!

《师兄啊师兄》动画第二季在12月14日终于正式开播&#xff0c;首播两集&#xff0c;还是很有诚意的。 这部动画改编自言归正传的小说《我师兄实在太稳健了》&#xff0c;原著的知名度不算很高&#xff0c;但玄机制作的动画让这个IP火出了圈。 动画第一季就凭借高颜值的人物建模…

spring boot 实现直播聊天室

spring boot 实现直播聊天室 技术方案: spring bootwebsocketrabbitmq 使用 rabbitmq 提高系统吞吐量 引入依赖 <dependencies><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>2.0.42&…

AI全栈大模型工程师(二十三)用 PyTorch 训练一个最简单的神经网络

文章目录 四、求解器五、一些常用的损失函数六、用 PyTorch 训练一个最简单的神经网络后记四、求解器 为了让训练过程更好的收敛,人们设计了很多更复杂的求解器 比如:SGD、L-BFGS、Rprop、RMSprop、Adam、AdamW、AdaGrad、AdaDelta 等等但是,好在最常用的就是 Adam 或者 Ad…

LeetCode 300最长递增子序列 674最长连续递增序列 718最长重复子数组 | 代码随想录25期训练营day52

动态规划算法10 LeetCode 300 最长递增子序列 2023.12.15 题目链接代码随想录讲解[链接] int lengthOfLIS(vector<int>& nums) {//创建变量result存储最终答案,设默认值为1int result 1;//1确定dp数组&#xff0c;dp[i]表示以nums[i]为结尾的子数组的最长长度ve…

VS Code连接远程Linux服务器调试C程序

1.在 VS Code 上安装扩展 C/C 2.通过 VS Code 连接远程 Linux 服务器 3.通过 VS Code 在远程 Linux 服务器上安装扩展 C/C 4.打开远程 Linux 服务器上的文件夹 【注】本文以 /root/ 为例。 5.创建项目文件夹&#xff0c;并在项目文件夹下创建C程序 6.按 F5&#xff0c;选…

mysql中的int(1)和int(10)的区别

今天偶然发现同事在写sql建表的时候把int类型括号后面的数字写成了1&#xff0c;但是我发现数据库里面的值已经远远超过了1位所能表示的范围&#xff0c;所以括号里面的数字肯定不是表示长度了&#xff08;印象中早期的navivat建表的时候&#xff0c;int类型如果默认不指定长度…

devc++如何建立一个c++项目?devc++提示源文件未编译?

打开devc APP后是这样的界面&#xff1b; 点击文件-> 新建->项目&#xff0c;这一点应该不难&#xff0c;主要是最后这个选择什么&#xff1f; 这样即可。 devc提示源文件未编译&#xff1f; 点击工具->编译选项&#xff1b; 如果不能解决&#xff0c;那就是可能路径…

文物数字化建模纹理贴图

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 1、文物3D数字化建模的特点 文物埋在地下历经千年&#xff0c;由于时…

Kafka Avro序列化之一:使用自定义序列化

定义Schema 通过 Apache Avro编程快速入门,我们定义了User实体类。 user.avsc {"namespace": "org.example.avro","type": "record","name"