Create js-子元素在父元素中滚动到可视区域.js

Author: Rain120

js-子元素在父元素中滚动到可视区域.js

@@ -0,0 +1,50 @@
+/**
+ * @param parent 父容器元素
+ * @param target 滚动的目标元素
+ * @param time 滚动时间 ms
+ */
+export function targetScrollTo(parent, target, time) {
+  let pos = getRelativePos(target);
+  scrollTo(parent, pos.top, time, () => {
+    console.log('Scroll End');
+  });
+}
+
+function getRelativePos(element) {
+  let parentPos = element.parentNode.getBoundingClientRect(), // parent pos
+    targetPos = element.getBoundingClientRect(), // target pos
+    pos = {} as any;
+  (pos.top = targetPos.top - parentPos.top + element.parentNode.scrollTop),
+    (pos.right = targetPos.right - parentPos.right),
+    (pos.bottom = targetPos.bottom - parentPos.bottom),
+    (pos.left = targetPos.left - parentPos.left);
+  return pos;
+}
+
+function easeInOutQuad(time) {
+  return time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time;
+}
+
+function scrollTo(element, to, duration, onDone?) {
+  let start = element.scrollTop,
+    change = to - start,
+    startTime = performance.now(),
+    now,
+    elapsed,
+    scrollTime;
+
+  function animateScroll() {
+    now = performance.now();
+    elapsed = now - startTime;
+    scrollTime = elapsed / duration;
+
+    element.scrollTop = start + change * easeInOutQuad(scrollTime);
+
+    if (scrollTime < 1) {
+      window.requestAnimationFrame(animateScroll);
+    } else {
+      onDone && onDone();
+    }
+  }
+  animateScroll();
+}