javascript html css editor contenteditable

how to know a contenteditable-div's y coordinate of scrolling?

I am trying to make a online code editor using html's contenteditable div.

The user will edit their code in the div, which supports a maxium of 19 without scrolling the div.

What I want to do is to make a line number for each line.

But as you can see, the line number won't change when the user is editing the code that overflows the div and makes the div scrolls. In order to fix this, I want to know the y-coordinate about scrolling of div. For example, if there's only 3 line, so the div doesn't scroll, the code returns 0, if there's 100 line and the caret is currently in the 100th line, which makes the div scrolls, the code returns 100-19=81.

Here's the code:

var textbox = document.getElementById("textbox");

var row_text = document.getElementById("row-text");

function update(){
    //line numbers text. For example, if the top line's number should be 1, then it should return `1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19`
    row_text.innerHTML="1\n2\n3";
}

setInterval(update, 1);

body{
	background-color: #24292E;
}

#textbox-container{
	border: 0.5px white solid;
	width: 500px;
	height: 300px;
	
	left: 50%;
	position: relative;
	transform: translate(-248px, 2px);
}

#textbox{
	
	width: 480px;
	height: 292px;

	resize: none;
	left: 50%;
	position: relative;
	transform: translate(-233px, 2px);
	
	overflow: hidden;
	
	
	background-color: #24292E;
	
	color: white;
	
	font-family: 'Source Code Pro', monospace;
	
	outline: none;
	
	font-size: 12px;
	
	overflow: hidden;
}

p{
	width: 0px;
	height: 0px;
	margin: 0px; 
	
	transform: translate(3px, 2px);
	
	font-family: 'Source Code Pro', monospace;
	
	font-size: 12px;
	
	color: white;
}

<!DOCTYPE html>
<html>
	<head>
		<title>TEST</title>
		<!--<link rel="stylesheet" type="text/css" href="style.css"></link>-->
		<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@700&display=swap" rel="stylesheet">
	</head>
	<body>
		<div id="textbox-container">
			<p id="row-text"></p>
			<div id="textbox" cols="50" rows="5" contenteditable="true"></div>
		</div>
		<!--<script src="script.js"></script>-->
	</body>
</html>

Is there any way possible to get the y-coordinate about scrolling?

Solution

const textbox = document.getElementById('textbox');
const logger = document.getElementById('logger');
const bottomLogger = document.getElementById('bottomLogger');

setInterval(() => {
  logger.value = textbox.scrollTop + 'px'; // Indentation from above
  loggerRow.value = textbox.scrollTop / 15; // row number
  
  bottomLogger.value = textbox.scrollHeight / 15;
}, 40)

#textbox {
  background: aqua;
  height: 150px;
  width: 300px;
  
  max-height: 150px; 
  overflow-y: scroll;
  
  font-size: 13px;
  line-height: 15px;
}

<div id=textbox contenteditable rows=5></div>


<ul>
  <li>
    <input id=logger>
  </li>
   <li>
    <label>
      <strong>Row number</strong>
      <input id=loggerRow>
    </label>
  </li>
  <li>
    <label>
      <strong>Bottom row</strong>
      <input id=bottomLogger>
    </label>
  </li>
</ul>

scrollTop API scrollHeight API