如何使可滚动的div在滚动时扩展到最大高度,然后单击

问题描述 投票:0回答:2

如果可能,我正在寻求更新以下部分。

我需要将div设置为250px高,但可以滚动浏览所有内容。滚动到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
2个回答
0
投票

您可以通过单击按钮来显示完整内容:

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

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


0
投票

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

不幸的是,我对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")
})
});

会不会是类似的东西?

点击我

亲切的问候。

© www.soinside.com 2019 - 2024. All rights reserved.