如何实现虚拟滚动条

2022-05-12 19:25

最近在做UI组件，发现下拉组件经常会有很多选项导致渲染的DOM过多，在低性能的设备上交互变的很卡。例如最常见的需求就是下拉选择所在国家或者地区，全世界有两百多个国家或者地区。如果把所有国家或者地区都渲染出来必然会导致DOM过多，在低性能设备上滚动起来都会很卡。这时候就需要使用虚拟滚动条来提高渲染性能。

# 虚拟滚动条原理

虚拟滚动的原理是显示的容器高度固定，我们只渲染用户看到的选项。但是选项容器的高度还是设置成所有选项的高度，这样滚动条效果保持一样，不过实际渲染的DOM数量却大大减少。

# 虚拟滚动条的数学计算

目前虚拟滚动的主要限制是需要知道显示容器的高度，渲染的每个选项的高度以及渲染的选项的数量。我们可以通过用户的滚动距离来计算需要显示的内容以及需要偏移的距离。

细节请参考下面的代码：

const VirtualScroll: React.FC<IVirtualScrollProps> = ({
  itemCount, // 选项的数量
  height, // 显示容器的高度
  childHeight, // 选项的高度
  itemData // 选项元素
}) => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  // 得高容器滚动了多少距离
  const scrollTop = useScrollAware(wrapperRef);
  // 计算渲染的选项的总高度
  const totalHeight = useMemo(
    () => childHeight * itemCount,
    [childHeight, itemCount]
  );
  // 根据滚动距离，计算要渲染的选项的起始位置
  const startIndex = useMemo(
    () => Math.floor(scrollTop / childHeight),
    [scrollTop, childHeight]
  );
  // 根据容器的高度计算要渲染的选项的数量
  const visibleItemCount = useMemo(
    () => Math.ceil(height / childHeight),
    [height, childHeight]
  );
  // 根据渲染的选项的起始位置，计算选项的偏移量
  const offsetY = useMemo(
    () => startIndex * childHeight,
    [childHeight, startIndex]
  );
  // 计算实际显示的选项元素
  const visibleItemData = useMemo(() => {
    return itemData.slice(startIndex, startIndex + visibleItemCount);
  }, [itemData, startIndex, visibleItemCount]);

  return (
    <div
      style={{
        height,
        overflow: 'auto'
      }}
      ref={wrapperRef}
    >
      <div
        style={{
          position: 'relative',
          overflow: 'hidden',
          willChange: 'transform',
          height: totalHeight
        }}
      >
        <div
          style={{
            willChange: 'transform',
            transform: `translate3d(0, ${offsetY}px, 0)`
          }}
        >
          {visibleItemData}
        </div>
      </div>
    </div>
  );
};

export default memo(VirtualScroll);

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

完整的实现请参考 Simple UI - Select (opens new window)

# 总结

在知道虚拟滚动条的原理之后，发现并不难实现，重点要理解几个数值的计算，才能明白为什么这样能达到预期的效果。

# 参考

Build your Own Virtual Scroll (opens new window)

禁用页面滚动

2022-03-13 15:11

web

在设计组件的时候，例如 Modal 弹窗组件，在显示组件的时候我们不希望页面可以滚动。这时候就需要临时禁用页面的滚动功能。接下来就讲解下禁用页面滚动的方法。

# 禁用滚动

document.body.style.setProperty('overflow', 'hidden');

禁用滚动的方法很简单，只需要在页面的 body 元素上设置 overflow 属性为 hidden，就可以禁用页面的滚动了。但是我们需要考虑到，如果我们的页面有滚动条，滚动条的消失会影响页面的显示效果。所以完美的禁用滚动方式需要考虑到当前页面滚动条的宽度。

function getScrollbarWidth() {
  const scrollbarWidth =
    window.innerWidth - document.documentElement.clientWidth;
  return scrollbarWidth;
}

function lockBody() {
  const scrollbarWidth = getScrollbarWidth();
  if (scrollbarWidth) {
    document.body.style.setProperty('padding-right', `${scrollbarWidth}px`);
  }
  document.body.style.setProperty('overflow', 'hidden');
}

1
2
3
4
5
6
7
8
9
10
11
12
13

为了保证不影响页面的显示效果，我们需要计算出当前页面滚动条的宽度，然后设置 body 的 padding-right 属性，这样就可以保证页面的显示效果。

# 恢复滚动

function unlockBody() {
  document.body.style.removeProperty('overflow');
  document.body.style.removeProperty('padding-right');
}

1
2
3
4

恢复滚动只需要把添加到 CSS 属性删除即可。

# 总结

如果一直使用 Mac 的触摸板来编程的话，有时候很难意识到滚动条的存在，但是对于大多数的 Windows 用户来说，滚动条会一直存在的。

# 参考

use-scroll-lock.ts (opens new window)

代理Sentry的请求

2021-12-30 22:21

web

Sentry (opens new window)是一款非常不错的网页监控工具，可以帮忙收集网页端的报错方便分析用户使用过程中遇到的问题。但是因为有收集用户隐私的风险，有些广告屏蔽软件会屏蔽 Sentry 的请求，所以我们需要使用反向代理的方式，让 Sentry 把请求发到我们自己的后端，我们再转发到 Sentry 服务器上。

# Sentry 端配置

添加 tunnel 选项，Sentry 就会把请求发到这个路径下，然后我们后台再处理转发。

Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  tunnel: '/sentry'
});

1
2
3
4

# 后台转发请求

app.set('trust proxy', true);

app.use(compression());
app.use(express.text());
app.use(express.json());
// 注意这三行代码一定要放在前面才能正常处理请求

app.post(/^\/sentry/, (req, res) => {
  const envelope = req.body;
  const piece = envelope.split('\n')[0];
  const header = JSON.parse(piece);
  if (header.dsn) {
    const dsn = new URL(header.dsn);
    const projectId = dsn.pathname.substr(1);
    const options = {
      hostname: dsn.hostname,
      port: 443,
      path: `/api/${projectId}/envelope/`,
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-sentry-envelope',
        'X-Forwarded-For': req.ip
      }
    };
    const request = https.request(options);
    request.write(envelope);
    request.end();
  }
  res.json({});
});

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

后台 Web 服务器是使用经典的 express，转发的时候记得开启trust proxy，因为我们的服务器基本会放在 Load balancing 后面，为了获取到真实的客户 IP 地址，我们需要层层转发保证收集到的信息是真实 IP 地址，而不是我们后端 IP 地址。

# 总结

Sentry 的反向代理本身并不是很复杂，但是网络上并没有相关的 JS 代码实现和处理 IP 转发问题，所以希望我的代码例子能帮助大家快速的解决这个问题。

# 参考

Dealing with Ad-Blockers (opens new window)