嵌套滚动条

最新推荐文章于 2023-06-27 15:18:39 发布

技能树

最新推荐文章于 2023-06-27 15:18:39 发布

阅读量969

点赞数

分类专栏：前端文章标签：滚动条嵌套

本文链接：https://blog.csdn.net/sinat_34748348/article/details/77502791

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

点击展开更多，外层div滚动条隐藏，内层table滚动条出现，下滑显示table隐藏内容

table高度<外层div高度，否则overflow不起作用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>overflow</title>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        table {
            display: block;
            width: 600px;
        }
        td{
            width: 600px;
            padding: 20px;
            background: gray;
        }
        .overflow{
            height:480px ;
            overflow-y: auto;
            overflow-x: hidden;
            width: 600px
        }

        .more{
            display: none;
            position: absolute;
            top: 440px;
            left:15px;
            z-index: 100;
            width: 535px;
            height: 40px;
            background: #fafafa;
            line-height: 40px;
            padding-left: 10px;
            cursor: pointer;
        }
        .more span{
            display: inline-block;
            width: 70px;
        }

    </style>

</head>
<body>
    <div class="overflow">
        <table>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
            <tr><td>1</td></tr>
        </table>
    </div>

</body>
</html>
<script>
    $('table').append('<div class="more"><span>展开更多</span></div>');
    $(".overflow").scroll(function () {
        var overflowHight =$('.overflow').scrollTop();
        //console.log(overflowHight)
        console.log($('table').height())
        if(overflowHight>=400){
            $('.more').show();
        }else{
           $('.more').hide();
        }
    })
         $('.more').on('click',function () {
             $('.more').hide();
             $('.overflow').removeClass('overflow');
             $('table').css({'overflow-y':'auto',"height":"520px"});
             console.log($('table').height())
         })

</script>

点击展开更多，外层div滚动条隐藏，内层table滚动出现，下滑显示table隐藏内容

技能树

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
嵌套滚动条

table高度html>head> meta charset="UTF-8"> title>overflowtitle> script src="jquery-3.2.1.min.js">script> style> table { display: block; width: 600px;
复制链接

扫一扫