feat: add scrollContainerSelection option #320

Co-authored-by: Hufe921 <huangyunfeihufe@hotmail.com>

src/editor/core/observer/ScrollObserver.ts

@@ -1,3 +1,4 @@
+import { IEditorOption } from '../../interface/Editor'
 import { debounce } from '../../utils'
 import { Draw } from '../draw/Draw'
 
@@ -12,9 +13,13 @@ export interface IPageVisibleInfo {
 
 export class ScrollObserver {
   private draw: Draw
+  private options: Required<IEditorOption>
+  private scrollContainer: Element | Document
 
   constructor(draw: Draw) {
     this.draw = draw
+    this.options = draw.getOptions()
+    this.scrollContainer = this.getScrollContainer()
     // 监听滚轮
     setTimeout(() => {
       if (!window.scrollY) {
@@ -24,20 +29,26 @@ export class ScrollObserver {
     this._addEvent()
   }
 
+  public getScrollContainer(): Element | Document {
+    return this.options.scrollContainerSelector
+      ? document.querySelector(this.options.scrollContainerSelector) || document
+      : document
+  }
+
   private _addEvent() {
-    document.addEventListener('scroll', this._observer)
+    this.scrollContainer.addEventListener('scroll', this._observer)
   }
 
   public removeEvent() {
-    document.removeEventListener('scroll', this._observer)
+    this.scrollContainer.removeEventListener('scroll', this._observer)
   }
 
   public getElementVisibleInfo(element: Element): IElementVisibleInfo {
     const rect = element.getBoundingClientRect()
-    const viewHeight = Math.max(
-      document.documentElement.clientHeight,
-      window.innerHeight
-    )
+    const viewHeight =
+      this.scrollContainer === document
+        ? Math.max(document.documentElement.clientHeight, window.innerHeight)
+        : (<Element>this.scrollContainer).clientHeight
     const visibleHeight =
       Math.min(rect.bottom, viewHeight) - Math.max(rect.top, 0)
     return {

src/editor/index.ts

@@ -169,6 +169,7 @@ export default class Editor {
       maskMargin: [0, 0, 0, 0],
       letterClass: [LETTER_CLASS.ENGLISH],
       contextMenuDisableKeys: [],
+      scrollContainerSelector: '',
       ...options,
       header: headerOptions,
       footer: footerOptions,

src/editor/interface/Editor.ts

@@ -66,6 +66,7 @@ export interface IEditorOption {
   maskMargin?: IMargin
   letterClass?: string[]
   contextMenuDisableKeys?: string[]
+  scrollContainerSelector?: string
   wordBreak?: WordBreak
   header?: IHeader
   footer?: IFooter