views:

98

answers:

2

I need to detect when a user arrives at the end of a readonly textarea in an html page.

The textarea will display a very long log for an application. The logs files are so big that is impossible to load all the text in one time (some log files are almost 200 MB). So I will load the first, say, 1000 lines, and then I need to detect when the user is near the last line of the loaded text to give him the next n lines via an ajax call.

What is the best way to detect this event?

+1  A: 

You could work with the caret position (checking where it is and comparing it to your length).

Or, you could work with the scrollbar position. (or a combination of both)

Blair McMillan
+2  A: 

You should compare the textarea.scrollHeight to the textarea.scrollTop - the closer they are, the closer you are to the end of your text area.

Alex Sexton
I made some tests with scrollHeight. In a textarea with a fixed height of 850px I get this values when I arrive at the end:scrollTop: 510scrollHeight: 1360 So it seems not true that "the closer they are, the closer you are to the end of your text area." Anyway this is a good starting point to find a solution.
alexmeia
@alexmeia looking at your numbers it seems like you could do this: if ( (element height + scrollTop) == scrollHeight ) {// bottom}
lincolnk
Well, I think it's all relative @alexmeia - What do they start as? It's likely you need to subtract a few offsets that I obviously don't know about.
Alex Sexton
@ Alex Sexton: you're right, it's all relative. Anyway, the method of comparing the values of scrollHeight and srollTop it's working well. I have found that those values are not exactly the same in all browsers, but they are close enough to do the job. Thanks.
alexmeia