getScrollBarSize.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = getScrollBarSize;
  6. exports.getTargetScrollBarSize = getTargetScrollBarSize;
  7. var _dynamicCSS = require("./Dom/dynamicCSS");
  8. /* eslint-disable no-param-reassign */
  9. var cached;
  10. function measureScrollbarSize(ele) {
  11. var randomId = "rc-scrollbar-measure-".concat(Math.random().toString(36).substring(7));
  12. var measureEle = document.createElement('div');
  13. measureEle.id = randomId;
  14. // Create Style
  15. var measureStyle = measureEle.style;
  16. measureStyle.position = 'absolute';
  17. measureStyle.left = '0';
  18. measureStyle.top = '0';
  19. measureStyle.width = '100px';
  20. measureStyle.height = '100px';
  21. measureStyle.overflow = 'scroll';
  22. // Clone Style if needed
  23. var fallbackWidth;
  24. var fallbackHeight;
  25. if (ele) {
  26. var targetStyle = getComputedStyle(ele);
  27. measureStyle.scrollbarColor = targetStyle.scrollbarColor;
  28. measureStyle.scrollbarWidth = targetStyle.scrollbarWidth;
  29. // Set Webkit style
  30. var webkitScrollbarStyle = getComputedStyle(ele, '::-webkit-scrollbar');
  31. var width = parseInt(webkitScrollbarStyle.width, 10);
  32. var height = parseInt(webkitScrollbarStyle.height, 10);
  33. // Try wrap to handle CSP case
  34. try {
  35. var widthStyle = width ? "width: ".concat(webkitScrollbarStyle.width, ";") : '';
  36. var heightStyle = height ? "height: ".concat(webkitScrollbarStyle.height, ";") : '';
  37. (0, _dynamicCSS.updateCSS)("\n#".concat(randomId, "::-webkit-scrollbar {\n").concat(widthStyle, "\n").concat(heightStyle, "\n}"), randomId);
  38. } catch (e) {
  39. // Can't wrap, just log error
  40. console.error(e);
  41. // Get from style directly
  42. fallbackWidth = width;
  43. fallbackHeight = height;
  44. }
  45. }
  46. document.body.appendChild(measureEle);
  47. // Measure. Get fallback style if provided
  48. var scrollWidth = ele && fallbackWidth && !isNaN(fallbackWidth) ? fallbackWidth : measureEle.offsetWidth - measureEle.clientWidth;
  49. var scrollHeight = ele && fallbackHeight && !isNaN(fallbackHeight) ? fallbackHeight : measureEle.offsetHeight - measureEle.clientHeight;
  50. // Clean up
  51. document.body.removeChild(measureEle);
  52. (0, _dynamicCSS.removeCSS)(randomId);
  53. return {
  54. width: scrollWidth,
  55. height: scrollHeight
  56. };
  57. }
  58. function getScrollBarSize(fresh) {
  59. if (typeof document === 'undefined') {
  60. return 0;
  61. }
  62. if (fresh || cached === undefined) {
  63. cached = measureScrollbarSize();
  64. }
  65. return cached.width;
  66. }
  67. function getTargetScrollBarSize(target) {
  68. if (typeof document === 'undefined' || !target || !(target instanceof Element)) {
  69. return {
  70. width: 0,
  71. height: 0
  72. };
  73. }
  74. return measureScrollbarSize(target);
  75. }