Javascript 如何使可滚动div在滚动时扩展到最大高度并单击_Javascript_Css_Scroll_Expandable

Javascript 如何使可滚动div在滚动时扩展到最大高度并单击

javascript css scroll

Javascript 如何使可滚动div在滚动时扩展到最大高度并单击,javascript,css,scroll,expandable,Javascript,Css,Scroll,Expandable,如果可能的话，我希望更新下面的部分我需要有一个div250px高，但让你滚动通过所有的内容。滚动到250px窗口的底部后，它会自动展开以显示全部内容还有一个按钮，如果你不向下滚动的话，点击下面的按钮可以扩展部分有人知道这是否可能吗我现在只能在你点击窗口时让它展开单击按钮即可显示全部内容，具体操作如下： $(window).load(function(){ // container will be your div which you want to expand on

如果可能的话，我希望更新下面的部分

我需要有一个div250px高，但让你滚动通过所有的内容。滚动到250px窗口的底部后，它会自动展开以显示全部内容

还有一个按钮，如果你不向下滚动的话，点击下面的按钮可以扩展部分

有人知道这是否可能吗

我现在只能在你点击窗口时让它展开

单击按钮即可显示全部内容，具体操作如下：

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

对于滚动端，您可以执行以下操作：

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

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

感谢您抽出时间回复

不幸的是，我是一个JS新手，所以我不知道如何正确地实现它

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

会不会是这样的

点击我

亲切问候。

感谢您抽出时间回复

不幸的是，我是一个JS新手，所以我不知道如何正确地实现它

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

会不会是这样的

点击我

亲切问候。

复制并粘贴此文件，然后运行一次

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


滚动示例
.这是你的盒子吗{
高度：250px；
文本对齐：居中；
溢出：自动；
}
Lorem Ipsuum虚拟文本和内容1
Lorem Ipsuum虚拟文本和内容2
Lorem Ipsuum虚拟文本和内容3
Lorem Ipsuum虚拟文本和内容4
Lorem Ipsuum虚拟文本和内容5
Lorem Ipsuum虚拟文本和内容6
Lorem Ipsuum虚拟文本和内容7
Lorem Ipsuum虚拟文本和内容8
Lorem Ipsuum虚拟文本和内容9
Lorem Ipsuum虚拟文本和内容10
Lorem Ipsuum虚拟文本和内容11
Lorem Ipsuum虚拟文本和内容12
Lorem Ipsuum虚拟文本和内容13
Lorem Ipsuum虚拟文本和内容14
Lorem Ipsuum虚拟文本和内容15
Lorem Ipsuum虚拟文本和内容16
Lorem Ipsuum虚拟文本和内容17
Lorem Ipsuum虚拟文本和内容18
Lorem Ipsuum虚拟文本和内容19
点击我
其他内容
其他内容
其他内容
$（函数（$）{
$（'#box'）。在（'scroll'，function（）上{
如果（$（此）.scrollTop（）+$（此）.innerHeight（）>=$（此）[0].scrollHeight）{
$（this.css（'height'，'max-content'）；
}
})
$（“#展开”）。在（'click'，函数（e）{
e、 预防默认值（）；
$（'#box'）.css（'height'，'max-content'）；
});
});

我希望它能帮助您复制并粘贴此文件，然后运行一次

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


滚动示例
.这是你的盒子吗{
高度：250px；
文本对齐：居中；
溢出：自动；
}
Lorem Ipsuum虚拟文本和内容1
Lorem Ipsuum虚拟文本和内容2
Lorem Ipsuum虚拟文本和内容3
Lorem Ipsuum虚拟文本和内容4
Lorem Ipsuum虚拟文本和内容5
Lorem Ipsuum虚拟文本和内容6
Lorem Ipsuum虚拟文本和内容7
Lorem Ipsuum虚拟文本和内容8
Lorem Ipsuum虚拟文本和内容9
Lorem Ipsuum虚拟文本和内容10
Lorem Ipsuum虚拟文本和内容11
Lorem Ipsuum虚拟文本和内容12
Lorem Ipsuum虚拟文本和内容13
Lorem Ipsuum虚拟文本和内容14
Lorem Ipsuum虚拟文本和内容15
Lorem Ipsuum虚拟文本和内容16
Lorem Ipsuum虚拟文本和内容17
Lorem Ipsuum虚拟文本和内容18
Lorem Ipsuum虚拟文本和内容19
点击我
其他内容
其他内容
其他内容
$（函数（$）{
$（'#box'）。在（'scroll'，function（）上{
如果（$（此）.scrollTop（）+$（此）.innerHeight（）>=$（此）[0].scrollHeight）{
$（this.css（'height'，'max-content'）；
}
})
$（“#展开”）。在（'click'，函数（e）{
e、 预防默认值（）；
$（'#box'）.css（'height'，'max-content'）；
});
});

我希望它能对你有所帮助

非常感谢，非常感谢。随时欢迎兄弟。我很高兴你从中受益。它在我的页面上运行得非常好。对不起，我可以再麻烦你一次吗。有没有办法在点击后隐藏展开按钮？是的，当然。只需添加这个$（'#expand'）.css（'display'，'none'）；在$（'#box'）.css之后。。谢谢你。我希望一旦我完成了一些训练，我将来能对人们有所帮助。非常感谢。非常感谢，非常感谢。随时欢迎兄弟。我很高兴你从中受益。它在我的页面上运行得非常好。对不起，我可以再麻烦你一次吗。有没有办法在点击后隐藏展开按钮？是的，当然。只需添加这个$（'#expand'）.css（'display'，'none'）；在$（'#box'）.css之后。。谢谢你。我希望一旦我完成了一些训练，我将来能对人们有所帮助。非常感谢。

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