首页 > 软件开发 > JavaScript >

js如何判断滚动条是否到底部

来源:互联网 2023-03-16 23:56:14 469

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。4mq办公区 - 实用经验教程分享!

scrollTop为滚动条在Y轴上的滚动距离。4mq办公区 - 实用经验教程分享!

clientHeight为内容可视区域的高度。4mq办公区 - 实用经验教程分享!

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。4mq办公区 - 实用经验教程分享!

所以,滚动条到底部的条件即为scrollTop clientHeight == scrollHeight。4mq办公区 - 实用经验教程分享!

js如何判断滚动条是否到底部4mq办公区 - 实用经验教程分享!

工具/原料

  • 浏览器(推荐使用百度浏览器)
  • 文本编辑器

方法/步骤

  • 1

    代码如下:4mq办公区 - 实用经验教程分享!

    !DOCTYPE html>html>4mq办公区 - 实用经验教程分享!

    head>4mq办公区 - 实用经验教程分享!

    meta charset="UTF-8">4mq办公区 - 实用经验教程分享!

    title>Test_Scroll_Bar_js/title>4mq办公区 - 实用经验教程分享!

    meta name="viewport" content="width=device-width, user-scalable=no">4mq办公区 - 实用经验教程分享!

    /head>4mq办公区 - 实用经验教程分享!

    body>4mq办公区 - 实用经验教程分享!

    div id="part1" style="height:1000px;overflow: auto;background: lightyellow;">/div>4mq办公区 - 实用经验教程分享!

    div id="part2" style="height:1000px;overflow: auto;background:lightgreen;">/div>4mq办公区 - 实用经验教程分享!

    script>4mq办公区 - 实用经验教程分享!

    var d = document.getElementById("part1").offsetHeight;4mq办公区 - 实用经验教程分享!

    console.info(d);4mq办公区 - 实用经验教程分享!

    window.addEventListener("scroll", function(event) {4mq办公区 - 实用经验教程分享!

    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;4mq办公区 - 实用经验教程分享!

    console.log(scrollTop); 4mq办公区 - 实用经验教程分享!

    if(document.documentElement.scrollHeight == document.documentElement.clientHeight scrollTop ) {4mq办公区 - 实用经验教程分享!

    alert("Touch_Buttom!");4mq办公区 - 实用经验教程分享!

    } 4mq办公区 - 实用经验教程分享!

    });4mq办公区 - 实用经验教程分享!

    /script>4mq办公区 - 实用经验教程分享!

    /body>4mq办公区 - 实用经验教程分享!

    /html>4mq办公区 - 实用经验教程分享!

    js如何判断滚动条是否到底部4mq办公区 - 实用经验教程分享!

  • 2

    滚动鼠标轮,向下浏览。4mq办公区 - 实用经验教程分享!

    js如何判断滚动条是否到底部4mq办公区 - 实用经验教程分享!

  • 2本页面未经授权抓取自百度经验
  • 3

    到达末端弹出窗口说明已经到达底部。4mq办公区 - 实用经验教程分享!

    js如何判断滚动条是否到底部4mq办公区 - 实用经验教程分享!

  • 注意事项

    • 例子比较简单,可以查阅相关资料

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!4mq办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码