嵌套滚动条

来源：互联网发布：js获取农历日期编辑：程序博客网时间：2024/06/05 05:04

点击展开更多，外层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 0