Search code examples
javascriptrich-text-editorquill

QuillJs - jumps to top

I'm using QuillJs as a text editor on my website. In a long post the screen view jumps to top when pasting text or changing heading type or alignment or color or inserting a link or video. Can't find out why.

QuillJs version: 1.2.6 Browser: Chrome 58.0.3029.110 OS: Windows 10

Initialization:

var toolbarOptions = [
    [{ 'header': [1, 2, 3, 4, 5, 6, false] },
       'bold', 'italic', 'underline', 'strike', { 'align': [] },
        { 'list': 'ordered' }, { 'list': 'bullet' },
        { 'color': [] }, { 'background': [] }], 

        ['image', 'blockquote', 'code-block', 'link', 'video'],

        ['clean']                                           
    ];
var quill = new Quill('#editor', {
    modules: {
      toolbar: toolbarOptions
    },
    theme: 'snow'
});
Solution

  • If you want an editor to be scrolled and maintained by a web page's main scrollbar, you need to set scrollingContainer property to 'body' during configuration of Quill object.

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