scroll.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  2. const require_runtime = require('../../_virtual/_rolldown/runtime.js');
  3. const require_aria = require('./aria.js');
  4. const require_easings = require('../easings.js');
  5. const require_types = require('../types.js');
  6. const require_raf = require('../raf.js');
  7. const require_style = require('./style.js');
  8. let _vueuse_core = require("@vueuse/core");
  9. let _vue_shared = require("@vue/shared");
  10. //#region ../../packages/utils/dom/scroll.ts
  11. const isScroll = (el, isVertical) => {
  12. if (!_vueuse_core.isClient) return false;
  13. const key = {
  14. undefined: "overflow",
  15. true: "overflow-y",
  16. false: "overflow-x"
  17. }[String(isVertical)];
  18. const overflow = require_style.getStyle(el, key);
  19. return [
  20. "scroll",
  21. "auto",
  22. "overlay"
  23. ].some((s) => overflow.includes(s));
  24. };
  25. const getScrollContainer = (el, isVertical) => {
  26. if (!_vueuse_core.isClient) return;
  27. let parent = el;
  28. while (parent) {
  29. if ([
  30. window,
  31. document,
  32. document.documentElement
  33. ].includes(parent)) return window;
  34. if (isScroll(parent, isVertical)) return parent;
  35. if (require_aria.isShadowRoot(parent)) parent = parent.host;
  36. else parent = parent.parentNode;
  37. }
  38. return parent;
  39. };
  40. let scrollBarWidth;
  41. const getScrollBarWidth = (namespace) => {
  42. if (!_vueuse_core.isClient) return 0;
  43. if (scrollBarWidth !== void 0) return scrollBarWidth;
  44. const outer = document.createElement("div");
  45. outer.className = `${namespace}-scrollbar__wrap`;
  46. outer.style.visibility = "hidden";
  47. outer.style.width = "100px";
  48. outer.style.position = "absolute";
  49. outer.style.top = "-9999px";
  50. document.body.appendChild(outer);
  51. const widthNoScroll = outer.offsetWidth;
  52. outer.style.overflow = "scroll";
  53. const inner = document.createElement("div");
  54. inner.style.width = "100%";
  55. outer.appendChild(inner);
  56. const widthWithScroll = inner.offsetWidth;
  57. outer.parentNode?.removeChild(outer);
  58. scrollBarWidth = widthNoScroll - widthWithScroll;
  59. return scrollBarWidth;
  60. };
  61. /**
  62. * Scroll with in the container element, positioning the **selected** element at the top
  63. * of the container
  64. */
  65. function scrollIntoView(container, selected) {
  66. if (!_vueuse_core.isClient) return;
  67. if (!selected) {
  68. container.scrollTop = 0;
  69. return;
  70. }
  71. const offsetParents = [];
  72. let pointer = selected.offsetParent;
  73. while (pointer !== null && container !== pointer && container.contains(pointer)) {
  74. offsetParents.push(pointer);
  75. pointer = pointer.offsetParent;
  76. }
  77. const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
  78. const bottom = top + selected.offsetHeight;
  79. const viewRectTop = container.scrollTop;
  80. const viewRectBottom = viewRectTop + container.clientHeight;
  81. if (top < viewRectTop) container.scrollTop = top;
  82. else if (bottom > viewRectBottom) container.scrollTop = bottom - container.clientHeight;
  83. }
  84. function animateScrollTo(container, from, to, duration, callback) {
  85. const startTime = Date.now();
  86. let handle;
  87. const scroll = () => {
  88. const time = Date.now() - startTime;
  89. const nextScrollTop = require_easings.easeInOutCubic(time > duration ? duration : time, from, to, duration);
  90. if (require_types.isWindow(container)) container.scrollTo(window.pageXOffset, nextScrollTop);
  91. else container.scrollTop = nextScrollTop;
  92. if (time < duration) handle = require_raf.rAF(scroll);
  93. else if ((0, _vue_shared.isFunction)(callback)) callback();
  94. };
  95. scroll();
  96. return () => {
  97. handle && require_raf.cAF(handle);
  98. };
  99. }
  100. const getScrollElement = (target, container) => {
  101. if (require_types.isWindow(container)) return target.ownerDocument.documentElement;
  102. return container;
  103. };
  104. const getScrollTop = (container) => {
  105. if (require_types.isWindow(container)) return window.scrollY;
  106. return container.scrollTop;
  107. };
  108. //#endregion
  109. exports.animateScrollTo = animateScrollTo;
  110. exports.getScrollBarWidth = getScrollBarWidth;
  111. exports.getScrollContainer = getScrollContainer;
  112. exports.getScrollElement = getScrollElement;
  113. exports.getScrollTop = getScrollTop;
  114. exports.isScroll = isScroll;
  115. exports.scrollIntoView = scrollIntoView;
  116. //# sourceMappingURL=scroll.js.map