Explication détaillée de js pour déterminer si la zone de contenu défile vers le bas-js tutoriel-php.cn

Explication détaillée de js pour déterminer si la zone de contenu défile vers le bas

小云云

Libérer： 2017-12-21 09:35:09

original

2834 Les gens l'ont consulté

Pour déterminer si le contenu défile jusqu'à la fin, vous devez connaître la hauteur réelle de la zone de contenu (c'est-à-dire la zone de défilement), la position de la barre de défilement depuis le haut et la hauteur visible du zone de contenu. Cet article partage principalement un jugement natif de js quant à savoir si la zone de contenu a défilé vers le bas. L'exemple de code a une bonne valeur de référence, j'espère qu'il pourra aider tout le monde.

correspondent respectivement aux trois API suivantes.

element.scrollHeight obtient la hauteur du contenu de l'élément,,, [attribut en lecture seule]

element.scrollTop peut obtenir ou définir la valeur de décalage de l'élément, qui est souvent utilisée pour calcule la position de la barre de défilement. Si le conteneur d'un élément ne génère pas de barre de défilement verticale, sa valeur scrollTop est par défaut à 0.

element.clientHeight lit la hauteur visible de l'élément [attribut en lecture seule ]

directement en dessous Citant une formule classique sur MDN

Déterminer si l'élément a défilé jusqu'au bout

Si l'élément a défilé jusqu'au bout, l'équation suivante renvoie vrai , sinon il renvoie false.

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

Copier après la connexion

Cas - Contrat d'utilisation

Seulement après que l'utilisateur a fini de lire l'accord peuvent-ils cliquer pour accepter, c'est-à-dire que la barre de défilement atteint le bas Puis le représentant a fini de lire

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

Copier après la connexion

Eh bien, aujourd'hui, j'ai soudainement j'ai vu cette API sur mdn. J'y ai réfléchi un moment
Element.scrollTop

Est-ce que tout le monde l'a appris ? Dépêchez-vous et essayez-le.

Recommandations associées :

Mise en œuvre de la barre de défilement interne div défilant vers le bas et les fonctions du haut

page jquery défilant vers the bottom Chargement automatique du plug-in collection_jquery

Code Javascript pour implémenter le défilement DIV et faire défiler automatiquement jusqu'aux compétences bottom_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Explication détaillée de js pour déterminer si la zone de contenu défile vers le bas