Javascript Textarea Scrolltop

August 30, 2023 Post a Comment

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,

Solution 1:

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.

Solution 2:

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.

Solution 3:

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..

Solution 4:

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.

Baca Juga

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><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><scripttype="text/javascript" >
$(function() {
$('#cb').hide(); //hide checkboxvar scrollThreshold = 4; //threshold valuevar 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><textareaid="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 /><inputtype="text"id="pos" /><inputtype="checkbox"id="cb" /></body></html>

Here's the screenshot for Safari:

javascript sammlung

Javascript Textarea Scrolltop

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Javascript Textarea Scrolltop"