如何使可滚动的 div 在滚动并单击时扩展到全高答案

【问题标题】：How to make a scrollable div expand to full height on scroll and click如何使可滚动的 div 在滚动并单击时扩展到全高
【发布时间】：2019-11-07 10:56:10
【问题描述】：

如果可能，我希望更新以下部分。

我需要一个 250 像素高的 div，但可以让您滚动浏览所有内容。滚动到 250px 窗口的底部后，它会自动展开以显示全部内容。

还有一个按钮，如果你不向下滚动，点击它会展开该部分。

有谁知道这是否可行？

我目前只能在你点击窗口时让它展开。

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'
})
})
});

【问题讨论】：

标签： javascript css scroll expandable

【解决方案1】：

复制粘贴并运行一次。

<!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>

希望对你有帮助

【讨论】：

非常感谢，非常感谢。
随时兄弟。我很高兴您从中受益。
它在我的页面上完美运行。能不能再麻烦你一次，不好意思问。有没有办法在点击后隐藏展开按钮？
是的，当然。只需添加此 $('#expand').css('display','none');在 $('#box').css.. 行之后
太棒了，谢谢。我希望一旦我完成了一些培训，我可以在未来对人们有所帮助。非常感谢。

【解决方案2】：

您可以执行以下操作，以在单击按钮时显示全部内容：

  $(window).load(function(){
      // container will be your div which you want to expand on click of button.
      $("#container").css("overflow", "hidden");
      $("#container").css("height", "250px");

    // expand-button will be button which will let you expand container on click.
    $('#expand-button').click(function() {
      $("#container").css("height", "auto")
    })
});

对于滚动结束，您可以这样做：

这里我使用文档作为滚动容器，如果滚动不是整页滚动，您可以使用自己的。

window.onscroll = function() {
  var d = document.documentElement;
  var offset = d.scrollTop + window.innerHeight;
  var height = d.offsetHeight;

  console.log('offset = ' + offset);
  console.log('height = ' + height);

  if (offset === height) {
    console.log('At the bottom');
  }
};

我希望这会对你有所帮助。

【讨论】：

【解决方案3】：

感谢您抽出宝贵时间回复。

不幸的是我对JS有点新手，所以我不确定如何正确实现它。

我需要什么按钮或链接格式来扩展该区域？

https://codepen.io/sharpy24ws/pen/YzzLYra

  $(window).load(function(){
  // container will be your div which you want to expand on click of button.
  $("#container").css("overflow", "hidden");
  $("#container").css("height", "250px");

// expand-button will be button which will let you expand container on click.
$('#expand-button').click(function() {
  $("#container").css("height", "auto")
})
});

会是这样的吗？

点我

亲切的问候。

【讨论】：