From 3958eca9eade0e8d63314dce8edf71554b67c275 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= <huangyunfeihufe@hotmail.com>
Date: Thu, 18 Aug 2022 18:50:46 +0800
Subject: [PATCH] feat:date picker scroll time into view

---
 .../core/draw/particle/date/DatePicker.ts     | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/editor/core/draw/particle/date/DatePicker.ts b/src/editor/core/draw/particle/date/DatePicker.ts
index e3ea616..4bbf79e 100644
--- a/src/editor/core/draw/particle/date/DatePicker.ts
+++ b/src/editor/core/draw/particle/date/DatePicker.ts
@@ -368,14 +368,36 @@ export class DatePicker {
     })
     const pickList: [HTMLOListElement, number][] = [[hourDom, hour], [minuteDom, minute], [secondDom, second]]
     pickList.forEach(([dom, time]) => {
-      const pickDom = dom.querySelector(`[data-id='${time}']`)!
+      const pickDom = dom.querySelector<HTMLLIElement>(`[data-id='${time}']`)!
       pickDom.classList.add('active')
       if (isIntoView) {
-        pickDom.scrollIntoView()
+        this._scrollIntoView(dom, pickDom)
       }
     })
   }
 
+  private _scrollIntoView(container: HTMLElement, selected: HTMLElement) {
+    if (!selected) {
+      container.scrollTop = 0
+      return
+    }
+    const offsetParents: HTMLElement[] = []
+    let pointer = <HTMLElement>selected.offsetParent
+    while (pointer && container !== pointer && container.contains(pointer)) {
+      offsetParents.push(pointer)
+      pointer = <HTMLElement>pointer.offsetParent
+    }
+    const top = selected.offsetTop + offsetParents.reduce((prev, curr) => (prev + curr.offsetTop), 0)
+    const bottom = top + selected.offsetHeight
+    const viewRectTop = container.scrollTop
+    const viewRectBottom = viewRectTop + container.clientHeight
+    if (top < viewRectTop) {
+      container.scrollTop = top
+    } else if (bottom > viewRectBottom) {
+      container.scrollTop = bottom - container.clientHeight
+    }
+  }
+
   private _preMonth() {
     this.now.setMonth(this.now.getMonth() - 1)
     this._update()