diff --git a/core/quill.js b/core/quill.js index 6fbfbcd83e..d478fbe633 100644 --- a/core/quill.js +++ b/core/quill.js @@ -307,6 +307,7 @@ Quill.DEFAULTS = { modules: {}, placeholder: '', readOnly: false, + scrollingContainer: null, strict: true, theme: 'default' }; @@ -367,7 +368,7 @@ function expandConfig(container, userConfig) { }; } userConfig = extend(true, {}, Quill.DEFAULTS, { modules: moduleConfig }, themeConfig, userConfig); - ['bounds', 'container'].forEach(function(key) { + ['bounds', 'container', 'scrollingContainer'].forEach(function(key) { if (typeof userConfig[key] === 'string') { userConfig[key] = document.querySelector(userConfig[key]); } diff --git a/docs/docs/configuration.md b/docs/docs/configuration.md index a7781e52f3..b768d1af0b 100644 --- a/docs/docs/configuration.md +++ b/docs/docs/configuration.md @@ -80,6 +80,12 @@ Default: `false` Whether to instantiate the editor to read-only mode. +#### scrollingContainer + +Default: `null` + +Specifies which container has the scrollbars (i.e. `overflow-y: auto`), if changed with CSS from the default `ql-editor`. Necessary to fix scroll jumping bugs when Quill is set to [auto grow](/playground/#autogrow) its height, and another ancestor container is responsible from the scrolling. + #### strict Default: `true` diff --git a/docs/playground.html b/docs/playground.html index ce7425675c..bd78748851 100644 --- a/docs/playground.html +++ b/docs/playground.html @@ -13,6 +13,8 @@ slug: kXRjQJ - title: Snow Toolbar Tooltips slug: ozYEro + - title: Autogrow Height + slug: dOqrVm - title: Quill Playground slug: KzZqZx --- diff --git a/modules/clipboard.js b/modules/clipboard.js index ebc2916a11..c6143c623b 100644 --- a/modules/clipboard.js +++ b/modules/clipboard.js @@ -58,6 +58,7 @@ class Clipboard extends Module { this.container.setAttribute('contenteditable', true); this.container.setAttribute('tabindex', -1); this.matchers = []; + this.scrollingContainer = quill.options.scrollingContainer || document.body; CLIPBOARD_CONFIG.concat(this.options.matchers).forEach((pair) => { this.addMatcher(...pair); }); @@ -95,7 +96,7 @@ class Clipboard extends Module { if (e.defaultPrevented || !this.quill.isEnabled()) return; let range = this.quill.getSelection(); let delta = new Delta().retain(range.index).delete(range.length); - let bodyTop = document.body.scrollTop; + let scrollTop = this.scrollingContainer.scrollTop; this.container.focus(); setTimeout(() => { this.quill.selection.update(Quill.sources.SILENT); @@ -103,7 +104,7 @@ class Clipboard extends Module { this.quill.updateContents(delta, Quill.sources.USER); // range.length contributes to delta.length() this.quill.setSelection(delta.length() - range.length, Quill.sources.SILENT); - document.body.scrollTop = bodyTop; + this.scrollingContainer.scrollTop = scrollTop; this.quill.selection.scrollIntoView(); }, 1); }