scroll a table

veronique rossi · Jun 2, 2004

Hello,

I have put a table in a scrollable DIV so that only one part of the
table is visible.
Now, I want that, when I scroll, the table is scrolled item by item in
the table (as it is done when we scroll in a SELECT box).

How can I do that?
Can I change the scroll step of the DIV? (to set 1 scroll step =
line's height in the table)

Thanks,

Veronique

veronique rossi · Jun 8, 2004

Here is the solution I have found:

<body>
<div id="mydiv" style="width:100;overflow:auto;background-color:#eeeeee;"
onscroll="scroll(this)">
<table id="tblobjest1" class="lst" cellspacing="0" cellpadding="0"<tr id="row"><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>
<tr><td>Row 5</td></tr>
<tr><td>Row 6</td></tr>
<tr><td>Row 7</td></tr>
<tr><td>Row 8</td></tr>
<tr><td>Row 9</td></tr>
<tr><td>Row 10</td></tr>
<tr><td>Row 11</td></tr>
<tr><td>Row 12</td></tr>
<tr><td>Row 13</td></tr>
<tr><td>Row 14</td></tr>
<tr><td>Row 15</td></tr>
<tr><td>Row 16</td></tr>
<tr><td>Row 17</td></tr>
<tr><td>Row 18</td></tr>
<tr><td>Row 19</td></tr>
<tr><td>Row 20</td></tr>
</table>
</div>

<script language='javascript'>

var realLastScrollTop = 0;
var currentLastScrollTop = 0;
var nbLines = 4;

// init the "table" height
document.all['mydiv'].style.height = document.all['row'].clientHeight
* nbLines;

function scroll(o) {

var cellHeight = document.all['row'].clientHeight;

if (currentLastScrollTop == o.scrollTop) {
// scroll action is stabilized
if (realLastScrollTop < o.scrollTop) {
o.scrollTop = (parseInt(o.scrollTop/cellHeight)+1)*cellHeight;
}
else {
if (o.scrollTop > (nbLines -1 * cellHeight)) {
o.scrollTop = parseInt(o.scrollTop/cellHeight)*cellHeight;
}
}
realLastScrollTop = o.scrollTop;
}
currentLastScrollTop=o.scrollTop;

}

</script>

kaeli · Jun 8, 2004

Here is the solution I have found:

Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.

--

Tim Slattery · Jun 8, 2004

kaeli said:
Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.

How much is IE only? He uses syntax like:

var cellHeight = document.all['row'].clientHeight;

which can be made browser-independent by changing it to:

var cellHeight = document.getElementById("row").clientHeight;

After clearing up addressing issues like that, what's left? Is
"clientHeight" maybe an IE only property?

Lasse Reichstein Nielsen · Jun 8, 2004

Tim Slattery said:
How much is IE only?

Hard to say. Since Opera is getting better and better at emulating IE,
some of it might not be IE-only, but will still fail in Mozilla.

He uses syntax like:

var cellHeight = document.all['row'].clientHeight;

which can be made browser-independent by changing it to:

Nothing is browser independent - Netscape 1 is still a browser

So,
you have to make some assumptions about the browsers on the receiving
end. The fewer the better, but there will always be some.

var cellHeight = document.getElementById("row").clientHeight;

After clearing up addressing issues like that, what's left? Is
"clientHeight" maybe an IE only property?

In Mozilla, "clientHeight" seems to always give 0 for a table row.
So, probably.
/L

kaeli · Jun 8, 2004

How much is IE only? He uses syntax like:

var cellHeight = document.all['row'].clientHeight;

which can be made browser-independent by changing it to:

var cellHeight = document.getElementById("row").clientHeight;

After clearing up addressing issues like that, what's left? Is
"clientHeight" maybe an IE only property?

I am pretty sure clientHeight is IE only as well, but I was mostly
looking at the document.all stuff.

I am also not sure about the support for scrollTop.

AFAIK, both clientHeight and scrollTop are IE only, but someone correct
me if I'm wrong.

--
--
~kaeli~
Synonym: the word you use in place of a word you can't
spell.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Tim Slattery · Jun 10, 2004

kaeli said:
Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.

A little research shows that this syntax works in Mozilla Firefox:

<table>
<thead>
<tr>

</tr>
<tbody style="overflow:auto;height:200px">

</tbody>
<table>

This causes the a 200 pixel tall block of the body of the table to be
shown, along with a vertical scrollbar on the right side! For some
reason, Firefox decided to show only 387 pixels (as shown by the DOM
inspector) horizontally, and gave me a horizontal scroll bar as well!
I assume that I could explicitly specify a width in the style
attribute to control this tendency.

Submitting the same page to IE showed a very bizarre result: IE made
EACH ROW in the body 200 pixels tall! And MS now says they will update
IE only for new operating system releases. AAAUUUGGGG!!!

Tim Slattery · Jun 10, 2004

Tim Slattery said:
A little research shows that this syntax works in Mozilla Firefox:

<table>
<thead>
<tr>

</tr>
<tbody style="overflow:auto;height:200px">

</tbody>
<table>

This causes the a 200 pixel tall block of the body of the table to be
shown, along with a vertical scrollbar on the right side! For some
reason, Firefox decided to show only 387 pixels (as shown by the DOM
inspector) horizontally, and gave me a horizontal scroll bar as well!
I assume that I could explicitly specify a width in the style
attribute to control this tendency.

Submitting the same page to IE showed a very bizarre result: IE made
EACH ROW in the body 200 pixels tall! And MS now says they will update
IE only for new operating system releases. AAAUUUGGGG!!!

A bit more: Firefox seems to add the horizontal bar to compensate for
the horizontal space lost to the vertical scroll bar. I'd call that a
bug. Interestingly, Netscape 7.02 displays this table perfectly.

Javascript scroll to sections and also scroll to section but open relevant nav-tab	4	Feb 25, 2022
Getting vertical scroll bar in a table cell	2	Apr 23, 2014
Football league table	0	Aug 21, 2022
iPad2 Scroll Bars ??	10	Dec 22, 2011
Horizontal scrollable table that is responsive	11	Jan 14, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Image sequence by scroll position problems	0	Sep 24, 2020
How to add dropdown selected data to table using jquery	2	Jul 2, 2022

scroll a table

veronique rossi

veronique rossi

kaeli

Tim Slattery

Lasse Reichstein Nielsen

kaeli

Tim Slattery

Tim Slattery

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads