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. 我正在尝试获得scrollTop的“真实”结尾，但是由于使用了不同的呈现引擎（壁虎，webkit，等等），固定值将不起作用。

This is part of my learning so please avoid posting solutions with libraries. 这是我学习的一部分，因此请避免在库中发布解决方案。

Any suggestions? 有什么建议么？

Answer 1

您可以尝试使用textarea的scrollHeight属性，并将其与scrollTop进行比较-如果相等，则用户位于最底端。

Answer 2

your_textarea.scrollTop + your_textarea.offsetHeight - your_textarea.scrollHeight should give you what you want. your_textarea.scrollTop + your_textarea.offsetHeight - your_textarea.scrollHeight应该会为您提供所需的内容。 It may be off by a few pixels, so I would probably allow it if it was in the ~ -20 range. 它可能会偏离几个像素，所以如果它在〜-20范围内，我可能会允许它。 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. 例如，我在文本区域中粘贴了大量冗长的随机废话序列，然后滚动到底部，然后运行该代码，结果为-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.) 如果没有空行，则理论上该值应为0（请确保使用===与0进行比较。）

In theory. 理论上。

Answer 3

find the height of the scrolling container (assuming it has id="scroll" ) 找到滚动容器的高度（假设它具有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.. 如果container_content_height = container_scroll_amount + container_real_height（+-几个像素），那么您位于底部。

Answer 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). 这是我使用阈值（在这种情况下为4）确定文本区域是否滚动到底部（或几乎底部）的实现。 I've included the display of the calculated value as well. 我还包括了计算值的显示。

The metric used are scrollHeight , scrollTop and jQuery's element height() . 使用的指标是scrollHeight ， scrollTop和jQuery的元素height() 。

Threshold of '4' works for IE8, Webkit browsers and FF3.5. 阈值“ 4”适用于IE8，Webkit浏览器和FF3.5。 FF3.5 and Safari (Windows) can go all the way to 0. FF3.5和Safari（Windows）可以一直为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: 这是Safari的屏幕截图：

javascript textarea scrollTop

问题描述

4 个解决方案

解决方案1
0 2010-01-12 03:10:56

解决方案2
0 2010-01-12 03:13:16

解决方案3
0 2010-01-12 03:19:17

解决方案4
0 2010-01-12 03:34:53

javascript textarea scrollTop

问题描述

4 个解决方案

解决方案1 0 2010-01-12 03:10:56

解决方案2 0 2010-01-12 03:13:16

解决方案3 0 2010-01-12 03:19:17

解决方案4 0 2010-01-12 03:34:53

解决方案1
0 2010-01-12 03:10:56

解决方案2
0 2010-01-12 03:13:16

解决方案3
0 2010-01-12 03:19:17

解决方案4
0 2010-01-12 03:34:53