js滚动条练习

最新推荐文章于 2024-08-04 16:33:59 发布

多喝_热水

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量55

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_55972948/article/details/134682704

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #info {
        width: 200px;
        height: 200px;
        background: red;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h3>欢迎注册</h3>
    <p id="info">
      1112345654 1112345654 1112345654 1112345654 1112345654 1112345654
      1112345654 1112345654 1112345654 1112345654 1112345654 1112345654
      1112345654 1112345654 1112345654 1112345654 1112345654 1112345654
      1112345654 1112345654 1112345654 1112345654 1112345654 1112345654
      1112345654 1112345654 1112345654 1112345654 1112345654 1112345654
      1112345654 1112345654 1112345654 1112345654 1112345654 1112345654
      1112345654 1112345654 1112345654 1112345654 1112345654 1112345654
      1112345654 1112345654 1112345654 1112345654
    </p>
    <form action="">
      <input type="checkbox" disabled="disabled" name="12"/>我已阅读
    <input type="submit" disabled="disabled" value="注册"  name="13"/>
    </form>
  </body>
</html>
<script>
 window.onload=function(){
    var info = document.getElementById("info");
  var inps = document.querySelectorAll("input");
  console.log(info, inps);
  info.onscroll = function () {
    console.log("111");
    // 检查滚动条是否滚动到底
    // console.log(info.scrollHeight,info.scrollTop,info.clientHeight);
    // console.log(Math.floor(info.scrollHeight-info.scrollTop)==info.clientHeight);
    if(Math.floor(info.scrollHeight-info.scrollTop)==info.clientHeight){
      // disabled true为禁用，false为使用
      inps[0].disabled = false;
      inps[1].disabled = false;
    }
  };
 }
</script>

为什么我会在事件判断中加入Math.floor()方法，因为有时候scrollTop的值是小数，而在进行if判断的时候我们用scrollHeight去减scrollTop时产生的值也是小数，为了与clientHeight比较，所以采取向下取整Math.floor()的方法，才能实现正常的判断