CSS特效:pointer-events: none;的一种特殊应用

一、需求描述

今天看到一个设计需求:需要在弹框中显示如下界面,其中有两个效果:
1.顶部点击项目,下面的内容能相应滚动定位,同时滚动的时候顶部项目也能相应激活显示
2.顶部右侧有一个模糊渐变效果,并且要保证不影响项目的点击
在这里插入图片描述

二、功能实现

第一点,实现很简单,核心代码如下:

<div class="drug-detail-content"><van-tabs v-model:active="active" @click-tab="handleTabClick"><van-tab v-for="i in ['适用症', '包装规格', '用法用量', '不良反应', '禁忌事项']" :title="`${i}`"></van-tab></van-tabs><div ref="tabContentRef" class="tabs-content"><div class="tab-title">适用症</div><div class="tab-content"></div><div class="tab-title">包装规格</div><div class="tab-content"></div><div class="tab-title">用法用量</div><div class="tab-content"></div><div class="tab-title">不良反应</div><div class="tab-content"></div><div class="tab-title">禁忌事项</div><div class="tab-content"></div></div></div>
const visiable = ref(false)
const active = ref(0)
import { useEventListener, useDebounceFn } from '@vueuse/core'
const tabContentRef = ref()let isClick = false // 防止点击引起的内容区滚动影响tab激活
const handleTabClick = ({name}) => {const ele = tabContentRef.value.getElementsByClassName('tab-title')[name]isClick = trueele?.scrollIntoView()
}const show = () => {visiable.value = truenextTick(() => {useEventListener(tabContentRef.value, 'scroll', useDebounceFn(() => {if(isClick) {isClick = falsereturn ;}const scrollTop = tabContentRef.value?.scrollTopconst eles = tabContentRef.value?.getElementsByClassName('tab-title')if(eles) {const tops = []Array.from(eles)?.map(o => {tops.push(o.offsetTop - 20)})active.value = tops.findIndex((v, i) => {return v <= scrollTop && scrollTop < tops[i+1]})}}, 300))})
}

第二点,它的实现,就得提到我们今天要说的pointer-events: none;

先看一下实现的效果:
在这里插入图片描述
可以看到我们利用伪元素::after,在wrap的右侧覆盖了带渐变背景的层:

background-image: linear-gradient(90deg,hsla(0,0%,100%,.5),#fff);

为了不让这个层影响我们点击后面的tab,这里重点需要对这个伪元素的层设置pointer-events: none;,它在这里起到一种点击“击穿”的效果:

By setting pointer-events to none, the element becomes “transparent” to pointer events, meaning it won’t capture any clicks or other pointer interactions, and they’ll pass through to the element behind it.
参考:How to Prevent Elements Receiving Click Events With CSS

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

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

相关文章

从0到1搭建数据中台(1)

初识 数据仓库&#xff0c;数据湖&#xff0c;大数据平台&#xff0c;数据中台的发展历程梳理&#xff1b;数据中台的搭建方法论&#xff1b;数据中台搭建的初步落地&#xff0c;参考大神郭忆的课程&#xff0c;看完就会对全貌有个理解。 Easydata大数据生产力平台架构图。 有…

html页面实现socket.io

使用CDN&#xff1a;https://socket.io/zh-CN/docs/v4/client-installation/ socket.on 监听服务端的事件 socket.emit 是客户端的事件 <!DOCTYPE html> <html> <head><title>长时间任务</title><script src"https://cdnjs.cloudflare…

linux 文件末尾追加内容

1、echo echo "Hello, World!" >> example.txt 2、printf printf "Hello, World!\n" >> example.txt 3、cat 多行添加 cat >> example.txt <<EOF Line 1 Line 2 Line 3 EOF 4、sed sed -i ‘$a\要添加的文本’ example.txt 其中…

vue实例和容器的一夫一制——04

//准备容器 <div classapp> <h1>{{mag}}</h1> </div> //准备容器 <div classapp> <h1>{{mag}}</h1> </div> //准备容器 <div classapp2> <h1>{{name}}</h1> </div> <script> // 验…

【通信协议-RTCM】GPS卫星星历 ---- 对应RTCM十六进制 编码ID(3FB)

注释&#xff1a; RTCM响应消息1014-1017为网络辅助站数据消息的内容&#xff0c;应该不是很重要&#xff08;工作中也未接触到此些语句&#xff09;&#xff0c;故忽略 1. 1019型消息的内容&#xff0c;GPS卫星星历数据 2. 1008型消息的内容——天线描述符和序列号 DATA FI…

久期分析与久期模型

目录 一、久期分析的理论原理 二、数据准备 三、Stata 程序代码及解释 四、代码运行结果 一、久期分析的理论原理 久期&#xff08;Duration&#xff09;是衡量债券价格对利率变动敏感性的重要指标。它不仅仅是一个简单的时间概念&#xff0c;更是反映了债券现金流回收的平均…

Elasticsearch:Node.js ECS 日志记录 - Pino

在我的上一篇文章 “Beats&#xff1a;使用 Filebeat 从 Python 应用程序中提取日志” 里&#xff0c;我详述了如何使用 Python 来生成日志&#xff0c;并使用 Filebeat 来收集日志到 Elasticsearch 中。在今天的文章中&#xff0c;我来详细描述如何使用 Node.js 来生成 ECS 相…

SAP ABAP开发从入门到精通 年薪约30~40万

SAP ABAP开发从入门到精通培训课程 SAP ABAP&#xff08;Advanced Business Application Programming&#xff09;开发是SAP系统中重要的一环&#xff0c;它是一种用于SAP软件开发的编程语言。如果你正寻求从入门到精通SAP ABAP开发的方法&#xff0c;以下推荐的培训课程可能会…

龙迅#LT6711GXE适用于HDMI2.1转DP1.4/TPYE-C应用方案,分辨率高达8K30HZ,4K144HZ!

1. 描述 LT6711GXE 是带有 PD 控制器的 HD-DVI2.1 到 DP1.4a 转换器。 对于 HD-DVI2.1 输入&#xff0c;LT6711GXE可以配置为 3/4 通道。自适应均衡使其适用于长电缆应用&#xff0c;最大带宽高达 40Gbps。它支持最高分辨率的8K30Hz、4K144Hz或8K60Hz压缩数据&#xff08;直通&…

小巧低调的黑盒子,打造个性化音乐体验,欧尼士ONIX Alpha小尾巴上手

欧尼士ONIX的产品很有辨识度&#xff0c;这家来自英国的品牌&#xff0c;有着鲜明的黑金设计色彩&#xff0c;以及低调奢华的质感&#xff0c;当然最重要的是&#xff0c;欧尼士的音质表现非常出色&#xff0c;因此深受音乐爱好者的喜爱。在以手机等设备为载体的流媒体音乐盛行…

旅游景区度假村展示型网站如何建设渠道品牌

景区、度假村、境外旅游几乎每天的人流量都非常高&#xff0c;还包括本地附近游等&#xff0c;对景区及度假村等固定高流量场所&#xff0c;品牌和客户赋能都是需要完善的&#xff0c;尤其是信息展示方面&#xff0c;旅游客户了解前往及查看信息等。 通过雨科平台建设景区度假…

玻璃钢一体化预制泵站多少钱一套

玻璃钢一体化预制泵站多少钱一套 一体化预制泵站的价格会因型号、规格等因素而有所不同。一般来说&#xff0c;中小型一体化预制泵站的价格在数万元至十多万元之间&#xff0c;而大型一体化预制泵站的价格可能会更高。具体价格取决于泵站的参数、功能、配置等因素&#xff0c;需…

ActivityThread,Instrumentation,Activity三者之间的关系是什么?

ActivityThread、Instrumentation、Activity三者之间的关系在Android系统中是紧密相连且相互作用的&#xff0c;它们共同构成了Android应用程序运行的基础框架。以下是对这三者之间关系的详细解析&#xff1a; 1. Activity 定义与功能&#xff1a;Activity是Android定义的四大…

ARM Linux C LCD屏 调用write()显示单色出现花屏、条状不消影

原因排查 液晶屏出现花屏现象的原因可以有多种&#xff0c;其中一种可能的原因是由于在向液晶屏的设备文件写入数据时&#xff0c;使用了write()这个系统调用函数。 write()是一个Linux内核提供的函数&#xff0c;用于应用程序与内核之间的数据交互。它允许应用程序向设备文件写…

thinkphp:数据库复合查询-OR的使用

完整代码 $data[info] db::table(po_headers_all)->alias(ph) //设置wip_jobs_all的别名->join([vendors > ve], ph.vendor_codeve.vendor_code)->field(ph.po_num,ph.status,ph.vendor_code,ve.vendor_name,ph.po_all_amount,ph.note,ph.order_date,ph.need_dat…

前端预览图片的两种方式:转Base64预览或转本地blob的URL预览,并再重新转回去

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 预览图片 一般情况下&#xff0c;预览图片功能&#xff0c;是后端返回一个图片地址资源&#xff08;字符串&#xff09;给前端&#xff0c;如&#xff1a;ashuai.work/static…

springboot大学校园二手书交易APP-计算机毕业设计源码25753

摘 要 在数字化与移动互联网迅猛发展的今天&#xff0c;人们对于图书的需求与消费方式也在悄然改变。为了满足广大读者对图书的热爱与追求&#xff0c;我们倾力打造了一款基于Android平台的图书交易APP。这款APP不仅汇聚了海量的图书资源&#xff0c;提供了便捷的交易平台&…

Kafka第四篇——生产数据总体概括,源码解析分区策略,数据收集器,Sender发送线程,key值

目录 流程图以及总体概述 拦截器 分区器以及分区计算策略 为啥进行分区计算&#xff1f; producer生产者怎么知道有哪些分区&#xff1f; 分区计算 如何自定义实现分区器&#xff1f; 想说的在图里啦&#xff01;宝宝&#xff01;&#x1f4a1; ​编辑 如果key值忘记传递了呢&a…

SAP BW培训课程:从入门到精通

1. 课程介绍 1.1 课程概述 SAP BW培训课程是一个全面系统的学习计划&#xff0c;旨在为学员提供从基础知识到高级技能的SAP商务信息仓库&#xff08;Business Warehouse&#xff09;应用培训。该课程涵盖了SAP BW的架构、数据建模、数据加载、信息提供、查询和报告的创建等关…