判断滚动条滚动到底部

 

 

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

 

DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bintitle>
<script src="https://code.jquery.com/jquery-3.1.0.js">script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background: pink;
  }  
style>  
head>
<body>
  
  <div id="box">div>
  <p>123p><p>123p><p>123p><p>123p><p>123p><p>123p><p>123p>
  <p>123p><p>123p><p>123p><p>123p><p>123p><p>123p><p>123p>
  <p>123p><p>123p><p>123p><p>123p><p>123p><p>123p><p>123p>
  <p>123p><p>123p><p>123p><p>123p><p>123p><p>123p><p>123p>
  <p>123p><p>123p><p>123p><p>123p><p>123p><p>123p><p>123p>
  
  
  <script>
    // $(window).scrollTop() 在Y轴上滚动的高度
    // $(window).height() 当前窗口可见高度
    // $(document).height() 可视区域高度+滚动溢出的高度
    $(window).scroll(function () {
      var scrollTop = $(this).scrollTop();
      var clientHeight = $(this).height();
      var scrollHeight = $(document).height();
      
      if(scrollTop + clientHeight == scrollHeight) {
        alert('滚动到底部');
      }
    });
  script>

body>
html>

 

转载于:https://www.cnblogs.com/lqcdsns/p/6134576.html

你可能感兴趣的:(判断滚动条滚动到底部)