feat:date picker scroll time into view

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()