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

Question

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

我需要 div 250 像素高，但可以让您滚动浏览所有内容。滚动到 250 像素 window 底部后，它会自动展开以显示完整内容。

还有一个按钮，如果您不向下滚动，则单击该按钮下方会展开该部分。

有人知道这是否可行吗？

目前只有点击window才能展开

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

Answer 1

点击按钮即可显示全部内容：

  $(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")
    })
});

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

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

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

希望对您有所帮助。

Answer 2

感谢您抽空回复。

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

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

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

会是这样吗？

点我

亲切的问候。

Answer 3

复制并粘贴此内容和运行一次。

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

希望对你有所帮助

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

How to make a scrollable div expand to full height on scroll and click

javascript

css

scroll

expandable