Scroll position is lost after pasting (with `scrollingContainer: null`)

[dcsaszar]

trafficstars

Steps for Reproduction

1. Visit https://codepen.io/anon/pen/geLExY
2. Scroll down a bit
3. Paste some text

Expected behavior:

Scroll position is unchanged, or keeps the text cursor visible.

Actual behavior:

The scroll position is at the top. The text input cursor is not visible.

Platforms:

OSX High Sierra Chrome 65.0.3325.162

Version:

//cdn.quilljs.com/1.3.6/quill.js

[paulkoanui]

Also experiencing this issue using the following version through bower:

https://github.com/quilljs/quill/releases/download/v1.3.6/quill.tar.gz

[zhangcaidie]

I'm experiencing this issue too, it bothers me for two days, can somebody solve this problem?

[geeosh]

Yes, this issue still exists -- even after https://github.com/quilljs/quill/commit/f79705ca2dac6ed27015a00d8594ef11986bb0a7 was applied.

[soynomm]

Can confirm, still an issue

[clementmas]

Seems like a duplicate of #1374

This option fixed my scroll jump issue but it still flickers: scrollingContainer: document.documentElement

[scrapooo]

This is also a good solution

   function findEditorScrollContainer(quill) {
      let el = quill.root;
      while (el) {
        if (el.scrollTop > 0) {
          break;
        }
        el = el.parentElement;
      }
      return el;
    }

     quill.on('editor-change', (type, delta, oldDelta, source) => {
          quill.scrollingContainer = findEditorScrollContainer(quill); // Solve the problem of scrolling to the top when pasting
         // your others code
       
     });

[Filipeue]

This solution worked perfect in my case: I cannot just set scrollingContainer: document.documentElement because i don't know where and how my editor will be used. So when creating Quill instance I try to find nearest scrolling element.

export function getScrollParent(node: HTMLElement | null): HTMLElement {
  if (!node) {
    return document.documentElement;
  }

  const overflowY =
    (node instanceof HTMLElement && window.getComputedStyle(node).overflowY) ||
    '';
  const isScrollable = !(
    overflowY.includes('hidden') || overflowY.includes('visible')
  );

  if (isScrollable && node.scrollHeight >= node.clientHeight) {
    return node;
  }

  return getScrollParent(node.parentNode as HTMLElement | null);
}

and use it like this when creating Quill instance (react+ts):

quill.current = new Quill(editorEl.current, {
    scrollingContainer: getScrollParent(editorEl.current),
});

also paste this in your css to remove flickering:

.ql-clipboard {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    opacity: 0;
}

[lakindu2002]

the issue is still there in 2021. any fixes?

[dirkdirk]

the issue is still there in 2022. any fixes?

[Filipeue]

@lakindu2002 @dirkdirk
Is the solution I provided above inadequate for your use case?

[dirkdirk]

@lakindu2002 @dirkdirk Is the solution I provided above inadequate for your use case?

@Filipeue

When I have Chrome's dev tools open the given solution does not work, but if dev tools is closed it works just fine.

Why would that be?

[akshaykadambatt]

None of the solutions worked for me ☹

[TOLU-MICH]

var quill = new Quill('#editor', { modules: { toolbar: toolbarOptions }, theme: 'snow', scrollingContainer: 'body' }); This worked for me

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide :pray: