scroll.js 3.9 KB

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