add support for ancestor scrolling container

closes slab#1082
aleksas · Dec 13, 2016 · 2f4435a · 2f4435a
1 parent 942c5bf
commit 2f4435a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,15 +96,15 @@ 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);
       delta = delta.concat(this.convert());
       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);
   }