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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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))
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

先看一下实现的效果：

可以看到我们利用伪元素::after，在wrap的右侧覆盖了带渐变背景的层：

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

为了不让这个层影响我们点击后面的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