feat: add scrollContainerSelection option #320

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

docs/en/guide/option.md

@@ -57,6 +57,7 @@ interface IEditorOption {
   maskMargin?: IMargin // Masking margins above the editor（for example: menu bar, bottom toolbar）。default: [0, 0, 0, 0]
   letterClass? string[] // Alphabet class supported by typesetting. default: a-zA-Z. Built-in alternative alphabet class: LETTER_CLASS
   contextMenuDisableKeys?: string[] // Disable context menu keys. default: []
+  scrollContainerSelector?: string // scroll container selector. default: document
   wordBreak?: WordBreak // Word and punctuation breaks: No punctuation in the first line of the BREAK_WORD &The word is not split, and the line is folded after BREAK_ALL full according to the width of the character. default: BREAK_WORD
   watermark?: IWatermark // Watermark{data:string; color?:string; opacity?:number; size?:number; font?:string;}
   control?: IControlOption // Control {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;}

docs/guide/option.md

@@ -57,6 +57,7 @@ interface IEditorOption {
   maskMargin?: IMargin // 编辑器上的遮盖边距（如悬浮到编辑器上的菜单栏、底部工具栏）。默认：[0, 0, 0, 0]
   letterClass?: string[] // 排版支持的字母类。默认：a-zA-Z。内置可选择的字母表类：LETTER_CLASS
   contextMenuDisableKeys?: string[] // 禁用的右键菜单。默认：[]
+  scrollContainerSelector?: string // 滚动区域选择器。默认：document
   wordBreak?: WordBreak // 单词与标点断行：BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认：BREAK_WORD
   watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;}
   control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;}

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(
+    const viewHeight =
-      document.documentElement.clientHeight,
+      this.scrollContainer === document
-      window.innerHeight
+        ? 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