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

一、需求描述

今天看到一个设计需求:需要在弹框中显示如下界面,其中有两个效果:

1.顶部点击项目,下面的内容能相应滚动定位,同时滚动的时候顶部项目也能相应激活显示

2.顶部右侧有一个模糊渐变效果,并且要保证不影响项目的点击

二、功能实现

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

html 复制代码
<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>
js 复制代码
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 = true
  ele?.scrollIntoView()
}
 
const show = () => {
  visiable.value = true
  nextTick(() => {
    useEventListener(tabContentRef.value, 'scroll', useDebounceFn(() => {
      if(isClick) {
        isClick = false
        return ;
      }
      const scrollTop = tabContentRef.value?.scrollTop
      const 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的右侧覆盖了带渐变背景的层:

css 复制代码
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

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css