如何利用jQuery实现上拉加载？

最新推荐文章于 2024-10-03 11:29:08 发布

摆烂的农民

最新推荐文章于 2024-10-03 11:29:08 发布

阅读量222

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/lb_888888/article/details/132359048

版权

文章描述了一个使用HTML、CSS和JavaScript实现的网页场景，当用户滚动到底部时，会动态加载一段描述自然景色的文字，营造出沉浸式体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html：

溪水潺潺，清泉在山间奔腾流淌。阳光透过树叶的缝隙闪烁，投下斑驳的光影，犹如一幅幅抽象的画作，融入了大自然的韵味。我站在岸边，凝望着水面上荡漾的涟漪，思绪被这田园般的景色牵引着。夏日的午后，微风轻拂，带来阵阵草木的芬芳。空气中弥漫着泥土的气息，让人心旷神怡。我伸手触摸着那清凉的河水，感受着它在指间滑过的柔软。岸边的芦苇随风轻轻摇曳，发出沙沙的声响，仿佛在述说着自己的故事。这条溪水是山脚下的一条小溪，流经这片宁静的山谷，汇入了山间的溪流。它是大自然赋予这片土地的一份恩赐，也是居民的生命之源。

</div>

< ----------------------分割线------------------------- >

css：

.body::-webkit-scrollbar {

width: 8px;

border-radius: 4px;

}

.body::-webkit-scrollbar-thumb {

width: 8px;

background-color: rgb(100, 100, 100);

background-clip: content-box;

border-radius: 10px;

}

.body::-webkit-scrollbar-thumb:hover {

/* 设置滑块的悬停颜色 */

background-color: rgb(50, 50, 50);

}

html,

body {

margin: 0;

padding: 0;

}

.body {

width: 300px;

height: 200px;

background-color: #ddd;

margin: 88px auto;

overflow-y: auto;

}

< ----------------------分割线------------------------- >

js：

const two = true;

$(".body").scroll(function() {

if (Math.ceil($(".body").scrollTop()) >= Math.ceil($("#body_son").outerHeight()) - Math.ceil($(".body").height()) && two) {

console.log("我到" + Math.ceil($(".body").scrollTop()) + "了");

two = false;

addSon();

return;

}

});

function addSon() {

if (Math.ceil($(".body").scrollTop()) <= 4000) {

$("#body_son").append(

"溪水潺潺，清泉在山间奔腾流淌。阳光透过树叶的缝隙闪烁，投下斑驳的光影，犹如一幅幅抽象的画作，融入了大自然的韵味。我站在岸边，凝望着水面上荡漾的涟漪，思绪被这田园般的景色牵引着。夏日的午后，微风轻拂，带来阵阵草木的芬芳。空气中弥漫着泥土的气息，让人心旷神怡。我伸手触摸着那清凉的河水，感受着它在指间滑过的柔软。岸边的芦苇随风轻轻摇曳，发出沙沙的声响，仿佛在述说着自己的故事。这条溪水是山脚下的一条小溪，流经这片宁静的山谷，汇入了山间的溪流。它是大自然赋予这片土地的一份恩赐，也是居民的生命之源。"

);

two = true;

}