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大数据生产力平台架构图。 有…

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

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

久期分析与久期模型

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

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

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

龙迅#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;旅游客户了解前往及查看信息等。 通过雨科平台建设景区度假…

前端预览图片的两种方式:转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…

《财经一线》实地探访|4000+伙伴力挺,格行随身WiFi全国布局加速!随身wifi官方正品推荐,口碑最好的随身wifi品牌

随着无线连接需求的井喷式增长&#xff0c;随身WiFi以其便携性、高效能迅速成为市场宠儿。在这片竞争激烈的蓝海中&#xff0c;格行随身WiFi凭借其独特的创新策略与卓越品质脱颖而出&#xff0c;成为行业内的佼佼者。近日&#xff0c;《财经一线》记者实地参观格行总部&#xf…

vue-使用Worker实现多标签页共享一个WebSocket

文章目录 前言一、SharedWorker 是什么SharedWorker 是什么SharedWorker 的使用方式SharedWorker 标识与独占 二、Demo使用三、使用SharedWorker实现WebSocket共享 前言 最近有一个需求&#xff0c;需要实现用户系统消息时时提醒功能。第一时间就是想用WebSocket进行长连接。但…

stm32——AD采集以及DMA

今天继续我们的STM32的内容学习&#xff0c;我使用的单片机是STM32F103VCT6,通过Keil Array Visualization软件来观测AD采样出来的波形。先来看看本次实验用到的硬件知识。 首先是ADC&#xff08;Analog-to-Digital Converter&#xff09;是模拟信号转数字信号的关键组件&#…

x264 编码器 AArch64 汇编函数模块关系分析

x264 编码器 AArch64 汇编介绍 x264 是一个流行的开源视频编码器,它实现了 H.264/MPEG-4 AVC 标准。x264 项目致力于提供一个高性能、高质量的编码器,支持多种平台和架构。对于 AArch64(即 64 位 ARM 架构),x264 编码器利用该架构的特性来优化编码过程。在 x264 编码器中,…

纹波电流与ESR:解析电容器重要参数与应用挑战

电解电容纹波电流与ESR&#xff08;Equivalent Series Resistance&#xff09;是电容器的重要参数&#xff0c;用来描述电容器对交流信号的响应能力和能量损耗。电解电容纹波电流是指电容器在工作时承受的交流信号电流&#xff0c;而ESR则是电容器内部等效电阻&#xff0c;影响…

下载设计免抠元素,就上这6个网站,免费下载!

寻找免费PNG免抠素材网站是创意设计者们探索的重要一环。这些网站提供了丰富的PNG格式素材&#xff0c;去除了背景&#xff0c;方便在不同项目中使用。精心挑选了6个免费PNG免抠素材网站&#xff0c;它们提供了高品质的素材资源&#xff0c;无论是个人设计还是商业项目&#xf…

CVE-2024-23692: Rejetto HTTP File Server 2.3m Unauthenticated RCE漏洞复现

目录 本文章仅供学习使用&#xff01;&#xff01;&#xff01; Rejetto HTTP介绍 漏洞简介 漏洞环境 漏洞复现 exp 复现 结果 如何修复 本文章仅供学习使用&#xff01;&#xff01;&#xff01; Rejetto HTTP介绍 Rejetto是一个流行的开源软件项目&#xff0c;主要…

python开发-创建项目

一、创建项目 1.1在终端 1. 进入某个目录&#xff08;项目放在哪&#xff09; 2. 执行命令创建项目 django-admin startproject 项目名称1.2 在pycharm中创建项目 二、创建app 创建app命令 django-admin startapp app01注册app 编写URL和视图函数对应关系 编写视图函数…

1950年-2021年中国历年民航航线里程统计报告

数据为1950年到2021年我国每年的民航航线总里程数据。 2021年&#xff0c;我国定期航班航线总里程为689.78万公里&#xff0c;相比2019年下降了258.44万公里。 数据统计单位为&#xff1a;公里. 数据说明&#xff1a; 2011年起民航航线里程改为定期航班航线里程 我国定期航班…

怎么将图片批量压缩处理?不牺牲图片清晰度的压缩秘诀

#北京city清凉walk指南# 夏日的北京&#xff0c;满目的绿色和清新空气让人沉醉。 然而&#xff0c;摄影爱好者们在记录这些美好瞬间的同时&#xff0c;也面临着大量图片的存储与管理难题。 随着手机和相机像素的提高&#xff0c;每张照片都可能成为存储空间的"大户&quo…