scroll.js 3.7 KB

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