util/src/getScrollBarSize.tsx at aff757c26005f9be54b81d307408a36d9f01b0dc · react-component/util · GitHub

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/* eslint-disable no-param-reassign */
import { removeCSS, updateCSS } from './Dom/dynamicCSS';

type ScrollBarSize = { width: number; height: number };

type ExtendCSSStyleDeclaration = CSSStyleDeclaration & {
  scrollbarColor?: string;
  scrollbarWidth?: string;
};

let cached: ScrollBarSize;

function measureScrollbarSize(ele?: HTMLElement, csp?: { nonce?: string }): ScrollBarSize {
  const randomId = `rc-scrollbar-measure-${Math.random()
    .toString(36)
    .substring(7)}`;
  const measureEle = document.createElement('div');
  measureEle.id = randomId;

  // Create Style
  const measureStyle: ExtendCSSStyleDeclaration = measureEle.style;
  measureStyle.position = 'absolute';
  measureStyle.left = '0';
  measureStyle.top = '0';
  measureStyle.width = '100px';
  measureStyle.height = '100px';
  measureStyle.overflow = 'scroll';

  // Clone Style if needed
  let fallbackWidth: number;
  let fallbackHeight: number;
  if (ele) {
    const targetStyle: ExtendCSSStyleDeclaration = getComputedStyle(ele);
    measureStyle.scrollbarColor = targetStyle.scrollbarColor;
    measureStyle.scrollbarWidth = targetStyle.scrollbarWidth;

    // Set Webkit style
    const webkitScrollbarStyle = getComputedStyle(ele, '::-webkit-scrollbar');
    const width = parseInt(webkitScrollbarStyle.width, 10);
    const height = parseInt(webkitScrollbarStyle.height, 10);

    // Try wrap to handle CSP case
    try {
      const widthStyle = width ? `width: ${webkitScrollbarStyle.width};` : '';
      const heightStyle = height
        ? `height: ${webkitScrollbarStyle.height};`
        : '';

      updateCSS(
        `
#${randomId}::-webkit-scrollbar {
${widthStyle}
${heightStyle}
}`,
        randomId,
        { csp },
      );
    } catch (e) {
      // Can't wrap, just log error
      console.error(e);

      // Get from style directly
      fallbackWidth = width;
      fallbackHeight = height;
    }
  }

  document.body.appendChild(measureEle);

  // Measure. Get fallback style if provided
  const scrollWidth =
    ele && fallbackWidth && !Number.isNaN(fallbackWidth)
      ? fallbackWidth
      : measureEle.offsetWidth - measureEle.clientWidth;

  const scrollHeight =
    ele && fallbackHeight && !Number.isNaN(fallbackHeight)
      ? fallbackHeight
      : measureEle.offsetHeight - measureEle.clientHeight;

  // Clean up
  document.body.removeChild(measureEle);
  removeCSS(randomId);

  return {
    width: scrollWidth,
    height: scrollHeight,
  };
}

export default function getScrollBarSize(fresh?: boolean): number {
  if (typeof document === 'undefined') {
    return 0;
  }

  if (fresh || cached === undefined) {
    cached = measureScrollbarSize();
  }
  return cached.width;
}

export function getTargetScrollBarSize(target: HTMLElement, csp?: { nonce?: string }) {
  if (
    typeof document === 'undefined' ||
    !target ||
    !(target instanceof Element)
  ) {
    return { width: 0, height: 0 };
  }

  return measureScrollbarSize(target, csp);
}