diff --git a/docs/en/guide/option.md b/docs/en/guide/option.md index 52954e9..207a548 100644 --- a/docs/en/guide/option.md +++ b/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;} diff --git a/docs/guide/option.md b/docs/guide/option.md index 909ab50..7b94f7e 100644 --- a/docs/guide/option.md +++ b/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;} diff --git a/src/editor/core/observer/ScrollObserver.ts b/src/editor/core/observer/ScrollObserver.ts index 19b0aa3..82ec566 100644 --- a/src/editor/core/observer/ScrollObserver.ts +++ b/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 + 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) + : (this.scrollContainer).clientHeight const visibleHeight = Math.min(rect.bottom, viewHeight) - Math.max(rect.top, 0) return { diff --git a/src/editor/index.ts b/src/editor/index.ts index 6e7b261..47bdd82 100644 --- a/src/editor/index.ts +++ b/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, diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index 935ec1a..6599955 100644 --- a/src/editor/interface/Editor.ts +++ b/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