getScrollBarSize.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = getScrollBarSize;
  6. exports.getTargetScrollBarSize = getTargetScrollBarSize;
  7. /* eslint-disable no-param-reassign */
  8. var cached;
  9. function getScrollBarSize(fresh) {
  10. if (typeof document === 'undefined') {
  11. return 0;
  12. }
  13. if (fresh || cached === undefined) {
  14. var inner = document.createElement('div');
  15. inner.style.width = '100%';
  16. inner.style.height = '200px';
  17. var outer = document.createElement('div');
  18. var outerStyle = outer.style;
  19. outerStyle.position = 'absolute';
  20. outerStyle.top = '0';
  21. outerStyle.left = '0';
  22. outerStyle.pointerEvents = 'none';
  23. outerStyle.visibility = 'hidden';
  24. outerStyle.width = '200px';
  25. outerStyle.height = '150px';
  26. outerStyle.overflow = 'hidden';
  27. outer.appendChild(inner);
  28. document.body.appendChild(outer);
  29. var widthContained = inner.offsetWidth;
  30. outer.style.overflow = 'scroll';
  31. var widthScroll = inner.offsetWidth;
  32. if (widthContained === widthScroll) {
  33. widthScroll = outer.clientWidth;
  34. }
  35. document.body.removeChild(outer);
  36. cached = widthContained - widthScroll;
  37. }
  38. return cached;
  39. }
  40. function ensureSize(str) {
  41. var match = str.match(/^(.*)px$/);
  42. var value = Number(match === null || match === void 0 ? void 0 : match[1]);
  43. return Number.isNaN(value) ? getScrollBarSize() : value;
  44. }
  45. function getTargetScrollBarSize(target) {
  46. if (typeof document === 'undefined' || !target || !(target instanceof Element)) {
  47. return {
  48. width: 0,
  49. height: 0
  50. };
  51. }
  52. var _getComputedStyle = getComputedStyle(target, '::-webkit-scrollbar'),
  53. width = _getComputedStyle.width,
  54. height = _getComputedStyle.height;
  55. return {
  56. width: ensureSize(width),
  57. height: ensureSize(height)
  58. };
  59. }