Detailed explanation of js to determine whether the content area is scrolled to the bottom-JS Tutorial-php.cn

Detailed explanation of js to determine whether the content area is scrolled to the bottom

小云云

Release： 2017-12-21 09:35:09

Original

2866 people have browsed it

To determine whether the content is scrolled to the end, you need to know the real height of the content area (that is, the scroll area), the position of the scroll bar from the top, and the visible height of the content area. This article mainly shares a js native judgment of whether the content area has scrolled to the bottom. The example code has a good reference value. I hope it can help everyone.

corresponds to the following three APIs respectively.

element.scrollHeight Gets the content height of the element,,, [Read-only attribute]

element.scrollTop can get or set the offset value of the element. It is often used to calculate the position of the scroll bar. If the container of an element does not generate a vertical scroll bar, its scrollTop value defaults to 0.

element.clientHeight Reads the visible height of the element [read-only attribute]

Directly below Quoting a classic formula on MDN

Determine whether the element scrolls to the end

If the element scrolls to the end, the following equation returns true, otherwise it returns false.

element.scrollHeight - element.scrollTop === element.clientHeight

Copy after login

Case-User Agreement

Only after the user has finished reading the agreement can they click to agree, which means that after the scroll bar reaches the bottom, it means Finish reading

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>
  <style>
    textarea{height: 200px;width: 300px}
  </style>
</head>
<body>

<p>
  <textarea>
    用户咨询条款
    一、咨询系统提供的服务

1、本网站咨询系统（以下简称“本系统”）为用户提供参与各种咨询项目（以下简称“项目”）的机会。用户在包之网上注册成为会员，并可申请某一专家会员通过包之网平台及电话等方式为其提供咨询服务。

2、您应按照您想要咨询的专家其所对应的专家收费金额，根据您希望互动/通话时间的长短，预先存入咨询费用，方可进行预约、咨询。咨询完成后，剩余的款项将在15个工作日内直接退还给您。您应提供详细的收款信息，否则本网站不承担任何责任。提请您注意，若预存金额过低，可能导致咨询中断。咨询费用根据本网站标准的专家收费金额及实际通话时间进行计算。您同意因银行处理本网站对您的每一笔付款所产生的全部费用将由您自行承担。

3、如果您对专家的工作内容或提供咨询服务质量等有异议，则在此等争议完全解决之前，本网站将扣留应付给您的款项。

4、如果您需要发票，应直接向提供咨询的专家要求，本网站不提供任何发票。

5、专家收费详见本网站不时发布的专家收费金额。专家收费金额及其修改均为本条款不可分割的组成部分，请您申请前仔细查看。

6、本网站根据实际情况尽可能根据您的要求、申请与专家进行匹配， 但专家有权不予提供服务。

  </textarea>
</p>
<p>
  <input type="checkbox" value="1" disabled="disabled"> 同意
</p>
<script>
  //获取checkbox元素
  var checkbox=document.querySelector(&#39;input[type=checkbox]&#39;);

  document.querySelector(&#39;textarea&#39;).addEventListener(&#39;scroll&#39;,function () {

    //读取内容区域的真实高度（滚动条高）
//    console.log(this.scrollHeight);

    //读取滚动条的位置
//    console.log(this.scrollTop);

    //设置滚动到的位置
//      this.scrollTop=800;

    //读取元素的高度
//    console.log(this.clientHeight)

    //意思就是内容总体的高度 - 滚动条的偏移值 === 元素的高度(包含内边)但不包含外边距，边框，以及滚动条
    if(this.scrollHeight-this.scrollTop===this.clientHeight){
      console.log("到达底部");
      //移除disabled属性
      checkbox.removeAttribute(&#39;disabled&#39;)
    }

  })


</script>
</body>
</html>

Copy after login

Okay, today I suddenly saw this API on mdn. I thought about it
Element.scrollTop

Have you learned it? Hurry up and give it a try.

Related recommendations:

Implementation of the div internal scroll bar scrolling to the bottom and top functions

jquery page scrolling to the bottom Automatically load plug-in collection_jquery

Javascript implements code for DIV scrolling to automatically scroll to the bottom_javascript skills

The above is the detailed content of Detailed explanation of js to determine whether the content area is scrolled to the bottom. For more information, please follow other related articles on the PHP Chinese website!