如何使可滚动 div 在滚动时扩展到全高并单击
How to make a scrollable div expand to full height on scroll and click
如果可能,我希望更新以下部分。
我需要 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'
})
})
});
点击按钮即可显示全部内容:
$(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');
}
};
希望对您有所帮助。
感谢您抽空回复。
不幸的是,我对 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")
})
});
会是这样吗?
点我
亲切的问候。
复制并粘贴此内容和 运行 一次。
<!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 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'
})
})
});
点击按钮即可显示全部内容:
$(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');
}
};
希望对您有所帮助。
感谢您抽空回复。
不幸的是,我对 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")
})
});
会是这样吗?
点我
亲切的问候。
复制并粘贴此内容和 运行 一次。
<!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>
希望对你有所帮助