javascript textarea scrollTop

Question

I'm trying to enable checkbox once the user reads all the agreement. Yet, well, I've tried googling with no avail and also confused. I'm trying to get the "real" end of scrollTop, but due to different rendering engines (gecko, webkit, blah blah? ) a fixed value won't work.

This is part of my learning so please avoid posting solutions with libraries.

Any suggestions?

score 0 · Answer 1 · answered Jan 12 '10 at 03:10

0

You can try using scrollHeight property of the textarea and compare it to scrollTop - if they're equal the user is at the very bottom.

answered Jan 12 '10 at 03:10

Marek Karbarz

28,956
6
53
73

tried this, it won't work since the width is around 400+ and when I scroll at the very end it gives me 288. – allenskd Jan 12 '10 at 03:21

score 0 · Answer 2 · answered Jan 12 '10 at 03:13

your_textarea.scrollTop + your_textarea.offsetHeight - your_textarea.scrollHeight should give you what you want. It may be off by a few pixels, so I would probably allow it if it was in the ~ -20 range. For example, I pasted a huge long sequence of random nonsense in a textarea and scrolled to the bottom, then ran that code and it gave me -2. This is because there are sometimes some blank lines at the bottom. If there are no blank lines, then in theory that value should be 0 (be sure to use === to compare to 0.)

In theory.

score 0 · Answer 3 · answered Jan 12 '10 at 03:19

find the height of the scrolling container (assuming it has id="scroll")

var container_real_height = document.getElementById('scroll').offsetHeight

now calculate

var container_content_height = document.getElementById('scroll').scrollHeight;
var container_scroll_amount = document.getElementById('scroll').scrollTop;

if container_content_height = container_scroll_amount + container_real_height (+- a few pixels) then you are at bottom..

score 0 · Answer 4 · edited Jun 01 '19 at 04:03

Here's my implementation using a threshold (4 in this case) to determine if the textarea is scrolled to the bottom (or almost the bottom). I've included the display of the calculated value as well.

The metric used are scrollHeight, scrollTop and jQuery's element height().

Threshold of '4' works for IE8, Webkit browsers and FF3.5. FF3.5 and Safari (Windows) can go all the way to 0.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$('#cb').hide(); //hide checkbox
var scrollThreshold = 4; //threshold value
var ta0 = $("#ta");
var ta = $("#ta")[0];
$("#ta").scroll(function(){
    var p = ta.scrollHeight - (ta.scrollTop + ta0.height());
    $('#pos').val(ta.scrollHeight + ' - (' + ta.scrollTop + ' + ' + ta0.height() + ')  = ' + p);
    if(p <= scrollThreshold) //if scroll value falls within threshold
      $('#cb').show(); //show checkbox
  }
);
});
</script>
</head>
<body>
<textarea id="ta" style="width: 200px; height: 100px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</textarea>
<br />
<input type="text" id="pos" />
<input type="checkbox" id="cb" />
</body>
</html>

Here's the screenshot for Safari:

javascript textarea scrollTop

4 Answers4

Linked