here is a quick one i done that works in ie7 and ff3 ..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
#container
{
width: 20px;
float: left;
color: Gray;
font-family: Courier New;
font-size: 14px;
overflow: hidden;
height: 85px;
position: relative;
top: 5px;
}
#divlines
{
position: absolute;
}
#text1
{
overflow-x: scroll;
height: 99px;
font-family: Courier New;
font-size: 14px;
}
</style>
</head>
<body>
<div id="container">
<div id="divlines">
</div>
</div>
<textarea id="text1" cols="50" wrap="off">first
second
third
fourth
fifth
sixth
seventh
eighth
ninth</textarea>
<script type="text/javascript">
var lines = document.getElementById("divlines");
var txtArea = document.getElementById("text1");
window.onload = function() {
refreshlines();
txtArea.onscroll = function () {
lines.style.top = -(txtArea.scrollTop) + "px";
return true;
}
txtArea.onkeyup = function () {
refreshlines();
return true;
}
}
function refreshlines() {
var nLines = txtArea.value.split("\n").length;
lines.innerHTML = ""
for (i=1; i<=nLines; i++) {
lines.innerHTML = lines.innerHTML + i + "." + "<br />";
}
lines.style.top = -(txtArea.scrollTop) + "px";
}
</script>
</body>
</html>
It could do with some improvements but the idea is there.