Textarea滚动事件未触发求助：滚动时无法启用复选框

首先咱们一步步拆解问题，先解决滚动事件完全没反应的核心问题，再修正逻辑和控件ID的坑：

1. 禁用的textarea不会触发滚动事件 #

你的<textarea>设置了disabled="disabled"，浏览器会直接忽略禁用元素的所有用户交互事件，包括滚动！这就是为什么连alert都弹不出来的原因。

如果想让用户只能滚动查看、不能修改内容，把disabled换成readonly="readonly"就可以了——只读状态下元素能正常响应滚动事件，同时用户无法编辑内容。

2. ASP.NET控件ID的客户端映射坑 #

ASP.NET的服务器控件（比如<asp:CheckBox>）在渲染到前端时，会根据页面结构自动生成带前缀的客户端ID（比如变成ctl00_MainContent_chk_termos），直接用$("#chk_termos")根本找不到这个元素，就算滚动事件触发了，也没法修改复选框状态。

解决这个问题有两种简单方式：

• 方式一（推荐，ASP.NET 4.0+）：给控件加上ClientIDMode="Static"，强制客户端ID和服务器端ID一致：

  <asp:CheckBox ID="chk_termos" runat="server" Enabled="false" AutoPostBack="true" ClientIDMode="Static"/>
  

• 方式二：在JS里用服务器端代码输出真实的客户端ID：

  $('#<%= chk_termos.ClientID %>').prop('disabled', false);
  

3. 逻辑反转问题 #

你的代码逻辑写反了：现在是滚动超过10px时禁用复选框，而需求是滚动后启用复选框。另外更合理的逻辑应该是当用户滚动到textarea底部时才启用（确保用户看完条款），而不是随便滚一下就开。

修正后的完整代码 #

<textarea name="terms" runat="server" id="terms" style="resize:none" readonly="readonly" rows="20" cols="10">
<!-- 这里放入你的服务条款内容 -->
</textarea>

<asp:CheckBox ID="chk_termos" runat="server" Enabled="false" AutoPostBack="true" ClientIDMode="Static"/>

<script type="text/javascript">
$(document).ready(function() {
  $("#terms").scroll(function() {
    var $textarea = $(this);
    // 判断是否滚动到了底部（滚动距离 + 可视高度 >= 内容总高度）
    if ($textarea.scrollTop() + $textarea.innerHeight() >= $textarea[0].scrollHeight) {
      $('#chk_termos').prop('disabled', false);
    }
  });
});
</script>

额外调整建议 #

如果你的需求不是必须滚到底部才启用，而是只要滚动过就开，把判断条件改成$textarea.scrollTop() > 0即可。测试时可以先把alert加回去，确认滚动事件已经正常触发。

内容的提问来源于stack exchange，提问作者Mingo Bille