jquery 监听 页面 滚动 到底部 顶部
jquery 监听 页面 滚动 到底部 顶部
$(function () {
$('.main').scroll(function () {
var scroH = $('.main').scrollTop(); //滚动高度
console.log(scroH);
var viewH = $('.main').height(); //可见高度
console.log(viewH);
var contentH = $('.content').height(); //内容高度
console.log(contentH);
if (scroH > 100) { //距离顶部大于100px时
console.log("大于100")
}
if (contentH - (scroH + viewH) <= 100) { //距离底部高度小于100px
console.log("小于100")
}
if (contentH == (scroH + viewH)) { //滚动条滑到底部啦
console.log("到底了")
}
});
})
参考 https://blog.csdn.net/weixin_44378370/article/details/110632674?ops_request_mis
jquery使滚动条滚动到最底部 scrollTop
需求：当div 中 内容过多出现滚动条时，让滚动条滚动到最下面。
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scrollHeight 网页内容实际高度
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.out-box {
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid blue;
margin: 10px;
overflow: auto;
}
p {
line-height: 40px;
border-bottom: 1px dashed rebeccapurple;
}
.btn {
background-color: #009688;
outline: 0;
display: inline-block;
height: 38px;
line-height: 38px;
padding: 0 18px;
border: none;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
#btn2 {
background: #0057b7;
}
</style>
</head>
<body>
<div class="out-box">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<p>第六行</p>
<p>第七行</p>
<p>最后一行</p>
</div>
<button class="btn" id="btn">移动到底部</button>
<button class="btn" id="btn2">查看高度值</button>
</body>
</html>
<script src="jquery.min.js"></script>
<script>
$("#btn").on("click", function () {
var h4 = $('.out-box').prop("scrollHeight"); //等同 $('.out-box')[0].scrollHeight
$('.out-box').scrollTop(h4);
});
$("#btn2").on("click", function () {
var h1 = $('.out-box').height();
console.log("height() 可视区域高度（不包含padding 和 border）=> h1: " + h1);
var h11 = document.getElementsByClassName("out-box")[0].clientHeight;
console.log("clientHeight 可视区域高度（包含padding 不包含border）=> h11: " + h11);
var h2 = $('.out-box')[0].offsetHeight;
var h22 = document.getElementsByClassName("out-box")[0].offsetHeight;
console.log("offsetHeight 可见区域高度（包含padding 和 border）=> h2 " + h2 + ' h22: ' + h22);
var h3 = $('.out-box').scrollTop();
var h33 = document.getElementsByClassName("out-box")[0].scrollTop;
console.log("scrollTop 被卷去的高度 => h3 " + h3 + ' h33: ' + h33);
var h4 = $('.out-box').prop("scrollHeight"); //等同 $('.out-box')[0].scrollHeight
var h44 = document.getElementsByClassName("out-box")[0].scrollHeight;
console.log('scrollHeight 内容实际高度 => h4: ' + h4 + ' h44: ' + h44);
});
</script>参考 https://blog.csdn.net/qq_40015157/article/details/118760759