scroll.mjs 3.5 KB

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