Need Help with scroll
Greetings. I'm building a similar lib, and while testing possibilities to make it fast enought, I had the following problem. I need to know how to make the header fixed when inside a div, instead of an Iframe (iframes make things very difficult to work with, since objects jumps to another layer on code). As you may seem, I have appended a function (listview_scroll()) to the onscroll event of the outer div. This works great on Mozilla, but IE seems to have some difficult, because there is a very small delay from the scrolling to the header position setting. Althought it works in the end, it's pretty anoying, don't you think? What should I do? (please, notie this is a test code, it's far from being an reusable object. I've been trying to make the object the outer div itself, but had no lucky at all. Need help on that too).
<html>
<body>
<script>
lv = document.createElement("div");
lvhd = document.createElement("div");
lvht = document.createElement("table");
lvbd = document.createElement("div");
lvbt = document.createElement("table");
lv.style.width = 300;
lv.style.height = 200;
lv.style.overflow = "auto";
lvhd.style.position = "relative";
lvhd.style.top = 0;
lvhd.style.height = 25;
lvhd.style.backgroundColor = "#CCCCCC";
lvht.style.width = 600;
lvbt.style.width = 600;
lv.appendChild(lvhd);
lv.appendChild(lvbd);
lvhd.appendChild(lvht);
lvbd.appendChild(lvbt);
//fixed header scroll
function listview_scroll()
{
this.childNodes[0].style.top = this.scrollTop;
}
lv.onscroll = listview_scroll;
document.body.appendChild(lv);
//fills header
lvhr = lvht.insertRow(lvht.rows.length);
for (i=0;i<3;i++)
{
lvhc = lvhr.insertCell(lvhr.cells.length);
lvhc.innerHTML = "Column " + i;
lvhc.style.width=200;
}
//fills body
for (j=0;j<10;j++)
{
lvbr = lvbt.insertRow(lvbt.rows.length);
for (i=0;i<3;i++)
{
lvbc = lvbr.insertCell(lvbr.cells.length);
lvbc.innerHTML = "teste " + j +"_"+ i;
lvbc.style.width=200;
}
}
</script>
</body>
</html>
<html>
<body>
<script>
lv = document.createElement("div");
lvhd = document.createElement("div");
lvht = document.createElement("table");
lvbd = document.createElement("div");
lvbt = document.createElement("table");
lv.style.width = 300;
lv.style.height = 200;
lv.style.overflow = "auto";
lvhd.style.position = "relative";
lvhd.style.top = 0;
lvhd.style.height = 25;
lvhd.style.backgroundColor = "#CCCCCC";
lvht.style.width = 600;
lvbt.style.width = 600;
lv.appendChild(lvhd);
lv.appendChild(lvbd);
lvhd.appendChild(lvht);
lvbd.appendChild(lvbt);
//fixed header scroll
function listview_scroll()
{
this.childNodes[0].style.top = this.scrollTop;
}
lv.onscroll = listview_scroll;
document.body.appendChild(lv);
//fills header
lvhr = lvht.insertRow(lvht.rows.length);
for (i=0;i<3;i++)
{
lvhc = lvhr.insertCell(lvhr.cells.length);
lvhc.innerHTML = "Column " + i;
lvhc.style.width=200;
}
//fills body
for (j=0;j<10;j++)
{
lvbr = lvbt.insertRow(lvbt.rows.length);
for (i=0;i<3;i++)
{
lvbc = lvbr.insertCell(lvbr.cells.length);
lvbc.innerHTML = "teste " + j +"_"+ i;
lvbc.style.width=200;
}
}
</script>
</body>
</html>
Pablo
March 25,