如果可能,我正在寻求更新以下部分。
我需要将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'
})
})
});
您可以通过单击按钮来显示完整内容:
$(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');
}
};
我希望这会对您有所帮助。
感谢您抽出宝贵的时间回复。
不幸的是,我对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")
})
});
会不会是类似的东西?
点击我
亲切的问候。