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