如果可能，我希望更新以下部分。
我需要一个 250 像素高的 div，但可以让您滚动浏览所有内容。滚动到 250 像素窗口的底部后，它会自动展开以显示全部内容。
还有一个按钮，如果您不向下滚动，则单击该按钮会展开该部分。
有人知道这是否可行吗？
目前只有点击窗 Eloquent 能展开。
https://codepen.io/sharpy24ws/pen/QWWrOoz
div {
width: 100%;
height: 250px;
background: #ccc;
overflow-y: auto;
}
#container{
margin:0px auto;
border:1px solid red;
}
#container div{
position:relative;
float:left;
margin-right:5px;
}
#container div span{
position:absolute;
bottom:0;
right:0;
}
$(window).load(function(){
$("div").css("overflow", "hidden");
$('div').click(function() {
$(this).animate({
height: '100vh'
})
})
});
最佳答案
复制并粘贴并运行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scroll Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.is_box{
height:250px;
text-align:center;
overflow:auto;
}
</style>
</head>
<body>
<div class="is_box" id="box">
<h3>Lorem Ipsuum Dummy Text & COntent1</h3>
<h3>Lorem Ipsuum Dummy Text & COntent2</h3>
<h3>Lorem Ipsuum Dummy Text & COntent3</h3>
<h3>Lorem Ipsuum Dummy Text & COntent4</h3>
<h3>Lorem Ipsuum Dummy Text & COntent5</h3>
<h3>Lorem Ipsuum Dummy Text & COntent6</h3>
<h3>Lorem Ipsuum Dummy Text & COntent7</h3>
<h3>Lorem Ipsuum Dummy Text & COntent8</h3>
<h3>Lorem Ipsuum Dummy Text & COntent9</h3>
<h3>Lorem Ipsuum Dummy Text & COntent10</h3>
<h3>Lorem Ipsuum Dummy Text & COntent11</h3>
<h3>Lorem Ipsuum Dummy Text & COntent12</h3>
<h3>Lorem Ipsuum Dummy Text & COntent13</h3>
<h3>Lorem Ipsuum Dummy Text & COntent14</h3>
<h3>Lorem Ipsuum Dummy Text & COntent15</h3>
<h3>Lorem Ipsuum Dummy Text & COntent16</h3>
<h3>Lorem Ipsuum Dummy Text & COntent17</h3>
<h3>Lorem Ipsuum Dummy Text & COntent18</h3>
<h3>Lorem Ipsuum Dummy Text & COntent19</h3>
</div>
<div>
<button id="expand">CLick me</button>
</div>
<div>
<h3>Other COntent</h3>
<h3>Other COntent</h3>
<h3>Other COntent</h3>
</div>
</body>
<script>
$(function($) {
$('#box').on('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
$(this).css('height','max-content');
}
})
$('#expand').on('click',function(e){
e.preventDefault();
$('#box').css('height','max-content');
});
});
</script>
</html>
希望对你有帮助
关于javascript - 如何使可滚动的 div 在滚动时扩展到全高并单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58747241/