如何实现虚拟滚动条

最近在做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)

Mac M1系统配置C++环境

最近在学习计算机图形学,需要配置C++环境和opencv来编译作业代码,于是我就开始折腾下M1如何编译C++代码了。

# 安装依赖

首先你需要安装Mac下的包管理器 homebrew (opens new window),官网有详细的安装教程,我就不赘述了。

接下来安装C++相关的依赖:

brew install gcc cmake
1

然后是图形学相关的依赖:

brew install eigen opencv
1

# 配置头文件路径

This script installs Homebrew to its preferred prefix (/usr/local for macOS Intel, /opt/homebrew for Apple Silicon and /home/linuxbrew/.linuxbrew for Linux) so that you don’t need sudo when you brew install.

homebrew 官网有描述M1的安装路径更改到 /opt/homebrew 了。所以我们需要指定头文件路径,这里我们指定到 /opt/homebrew/include

export CPATH=/opt/homebrew/include
export LIBRARY_PATH=/opt/homebrew/lib
1
2

把上述代码添加到 .bashrc 文件,如果你使用的是 zsh 请添加到 .zshrc 文件。

# 检测头文件路径

gcc -x c++ -v -E /dev/null 
1

如果输出结果有 /opt/homebrew/include 就说明配置成功了。

# 总结

配置环境看似简单,但找到解决方案需要花不少时间,这里主要问题是M1下安装路径不同,所以我们需要指定头文件路径。

# 参考

Installing a C/C++ library with homebrew on M1 Macs (opens new window)

在 Mac OS 下配置 GAMES101 开发环境 (opens new window)

View default include path of C headers in Mac OS X by gcc -v? (opens new window)

禁用页面滚动

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

# 禁用滚动

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

禁用滚动的方法很简单,只需要在页面的 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)