Geek asks and answers

Javascript textarea scrollTop

I am trying to turn on the checkbox when the user reads the entire agreement. However, well, I tried searching the Internet to no avail, and was also embarrassed. I am trying to get the “real” end of scrollTop, but due to different rendering engines (gecko, webkit, blah blah?), A fixed value will not work.

This is part of my training, so please do not submit library solutions.

Any suggestions?

+1
source share
4 answers

You can try to use the property of the scrollHeighttext field and compare it with scrollTop- if they are equal, the user is at the very bottom.

0
source

your_textarea.scrollTop + your_textarea.offsetHeight - your_textarea.scrollHeight , . , , , , ~ -20. , , , -2. , . , 0 ( === 0.)

.

0

( , id="scroll")

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


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 (+ - ), .

0

Here, my implementation uses a threshold (in this case 4) to determine if the text area scrolls to the bottom (or almost to the bottom). I also turned on the display of the calculated value.

Used metric: scrollHeight, scrollTopand jQuery element height().

Threshold "4" works for browsers IE8, Webkit and FF3.5. FF3.5 and Safari (Windows) can go up 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 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 is a screenshot for Safari:

In Safari http://i46.tinypic.com/nej3ft.jpg

0
source

More articles:


All Articles