滚动条滚动到最底部

最新推荐文章于 2022-05-17 22:41:16 发布

晓亮09

最新推荐文章于 2022-05-17 22:41:16 发布

阅读量541

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zl8762385/article/details/8131903

版权

javascript 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="Steve Smith" />
    <script src="/static/js/common/jquery.js"></script>
	<title>无标题 1</title>
</head>


<body>
<script>


jQuery(document).ready(function () {
 
    $("#test").bind("resize", function(){ //绑定事件 


    }).bind("scroll", function(){ 
        var scroll = $(this).scrollTop();//获得滚动条卷起来的高度值
        var scrollHeight = $("#test")[0].scrollHeight - $("#test")[0].clientHeight;//滚动内容实际高度 - 可视区域高度
      
        if (scroll == scrollHeight) {
            alert('到底部了')
        }
       
    });
    
    
    $("#sb").bind("click", function (){
         $("#test").scrollTop($("#test")[0].scrollHeight)
    })
});


</script>
<div id="sb">滚动底部</div>
<div id="test" style="overflow-y: auto; height:200px; border:1px solid red">
测试测试1<br />
测试测试2<br />
测试测试3<br />
测试测试4<br />
测试测试5<br />
测试测试6<br />
测试测试7<br />
测试测试8<br />
测试测试9<br />
测试测试10<br />
测试测试11<br />
测试测试12<br />
测试测试13<br />
测试测试14<br />
测试测试15<br />
测试测试16<br />
</div>
</body>
</html>

晓亮09

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动条滚动到最底部

无标题 1jQuery(document).ready(function () { $("#test").bind("resize", function(){ //绑定事件 }).bind("scroll", function(){ var scroll = $(this).scrollTop();//获得滚动
复制链接

扫一扫

专栏目录