JSFiddle - React, Tailwind, and code Playground

by Udhay

HTML

<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>

<div id="scrollable">
  <p>
    scroll down
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
   <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
   <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  
  <div id="editor1" contenteditable=true>
    <p style="background-color:red;">
      Click me! I'm editable! ...then scroll down.
    </p>
  </div>
  
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
    content
  </p>
  <p>
   ...

CSS

body{
  overflow:auto;
}

#editor1 {
  background-color:red;
}

#scrollable {
  height:300px;
  background:white;
  overflow:scroll;
  margin:0;
  position: fixed;
  width: 40%;
  height: 300px;
  top: 0;
}

JavaScript

document.getElementById("scrollable").addEventListener('scroll', function(){
	CKEDITOR.document.getWindow().fire('scroll');
});