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

一、需求描述

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

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

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

二、功能实现

第一点，实现很简单，核心代码如下：

      
        
      
      

        
适用症
        

        
        
包装规格
        

        
        
用法用量
        

        
        
不良反应
        

        
        
禁忌事项
        

        
      
    

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