feat: 判断dom是否滚动到底部
This commit is contained in:
parent
fbf31624c3
commit
4c210cb365
159
html/滑动加载.html
Normal file
159
html/滑动加载.html
Normal file
@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
ul, li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
border: pink 1px solid;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
li .avatar {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
flex-basis: 100px;
|
||||
}
|
||||
li .content {
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 全屏幕覆盖的加载动画 */
|
||||
.loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.8); /* 白色半透明背景 */
|
||||
z-index: 9999; /* 确保在最顶层 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 加载动画样式 */
|
||||
.loader::after {
|
||||
content: '';
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
border: 5px solid #333; /* 黑色边框 */
|
||||
border-top: 5px solid #fff; /* 白色顶部边框 */
|
||||
animation: spin 1s linear infinite; /* 旋转动画 */
|
||||
}
|
||||
|
||||
/* 旋转动画 */
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 其他页面内容样式 */
|
||||
.content {
|
||||
/* 添加你的内容样式 */
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul id="list"></ul>
|
||||
<div class="loader" style="visibility:hidden;"></div>
|
||||
<script>
|
||||
let data = [
|
||||
{
|
||||
avatar: '/upload/b178e0eaa1516fe27b3babd932aa37cc80b17472.jpg@942w_930h_progressive.jpeg',
|
||||
content: '我是皮特，我是圆蛤镇的一位出生，哈哈哈哈哈'
|
||||
},
|
||||
{
|
||||
avatar: '/upload/f892d57fedb12065c2b1379eb6f193ab91e9b364.jpg@942w_936h_progressive.jpeg',
|
||||
content: '我是路易斯老妈，我是圆蛤镇的一位出生，哈哈哈哈哈'
|
||||
},
|
||||
{
|
||||
avatar: '/upload/710827654220b2e2418aa9b24838974ea8b0f9fd.jpg@942w_921h_progressive.jpeg',
|
||||
content: '我是亚裔新闻记者，我是圆蛤镇的一位出生，哈哈哈哈哈'
|
||||
},
|
||||
{
|
||||
avatar: '/upload/8e5e9700d916e69f69c79cdb5f525d67ee9a3f0d.jpg@942w_927h_progressive.jpeg',
|
||||
content: '我是饺子，我是圆蛤镇的一位出生，哈哈哈哈哈'
|
||||
},
|
||||
{
|
||||
avatar: '/upload/39ab275203860c6fdfaa58d061cc262c7618a459.jpg@942w_923h_progressive.jpeg',
|
||||
content: '我是圆蛤镇的一位出生，哈哈哈哈哈'
|
||||
},
|
||||
{
|
||||
avatar: '/upload/c73b288188420cdc89ab913975fee837c79a058f.jpg@942w_927h_progressive.jpeg',
|
||||
content: 'shut up！ meg'
|
||||
},
|
||||
{
|
||||
avatar: '/upload/5045ae78e674c40f0f295fdac12b6a9e7a11cce1.jpg@942w_920h_progressive.jpeg',
|
||||
content: '我是一只鸡，我是圆蛤镇的一位出生，哈哈哈哈哈'
|
||||
},
|
||||
{
|
||||
avatar: '/upload/08e724093b3384d5b5186919a03caaa7b2b0d276.jpg@942w_933h_progressive.jpeg',
|
||||
content: '我是Lois老爸，我是圆蛤镇的一位出生，哈哈哈哈哈'
|
||||
},
|
||||
{
|
||||
avatar: '/upload/6f69059fc87968768f9ea38659b9c194700b4b0b.jpg@942w_924h_progressive.jpeg',
|
||||
content: '我是chrim，我爱🦌管'
|
||||
},
|
||||
{
|
||||
avatar: '/upload/65f2d1791026a08c58d544628b4745513c013b78.jpg@942w_924h_progressive.jpeg',
|
||||
content: '我是上帝，我是圆蛤镇的一位出生，哈哈哈哈哈'
|
||||
}
|
||||
]
|
||||
|
||||
// 获取dom
|
||||
let list = document.querySelector("#list")
|
||||
// 渲染函数，把提供的数据追加到后面
|
||||
function renderList(data) {
|
||||
data.forEach(item => {
|
||||
// 创建li标签，往li标签里面添加内容，然后依次追加到list中去
|
||||
let li = document.createElement('li');
|
||||
li.innerHTML = `<img class="avatar" src="${item.avatar}" alt="">
|
||||
<div class="content">${item.content}</div>`
|
||||
list.appendChild(li)
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化渲染
|
||||
renderList(data.map(item=>({...item, avatar: 'https://blog.icoding.fun' + item.avatar})))
|
||||
|
||||
/*
|
||||
在JavaScript中，你可以使用 scroll 事件来监听滚动，并结合一些属性来判断是否滑动
|
||||
到了页面底部。一个常用的方法是检查scrollTop 和 clientHeight 属性与 scrollHeight 属性的关系。
|
||||
当 scrollTop + clientHeight 等于 scrollHeight 时，表示页面已经滚动到了底部。
|
||||
*/
|
||||
let flag = false // 是否已经到底
|
||||
let loader = document.querySelector(".loader")
|
||||
new Promise((resove)=>{ // 如果直接监听会导致dom刷新时触发scroll事件，所以等加载完成之后再监听
|
||||
window.onload = function(){
|
||||
resove(1)
|
||||
}
|
||||
}).then((res)=>{
|
||||
window.addEventListener('scroll', function(){
|
||||
if(flag) return
|
||||
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
|
||||
flag = true
|
||||
// 追加新的数据
|
||||
loader.style.visibility = "visible"
|
||||
setTimeout(() => {
|
||||
let nData = data.sort(()=>Math.random() - 0.5) // 打乱数组
|
||||
renderList(data.map(item=>({...item, avatar: 'https://blog.icoding.fun' + item.avatar})))
|
||||
flag = false
|
||||
loader.style.visibility = "hidden"
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
36
html/滑动底部判断.html
Normal file
36
html/滑动底部判断.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.parent {
|
||||
height: 300px;
|
||||
background-color: aquamarine;
|
||||
overflow: scroll;
|
||||
}
|
||||
.son {
|
||||
height: 1000px;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(to bottom, #ff0000, #00ff00); /* 从上到下的颜色渐变 */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="parent">
|
||||
<div class="son"></div>
|
||||
</div>
|
||||
<script>
|
||||
let parent = document.querySelector(".parent")
|
||||
let son = document.querySelector(".son")
|
||||
// 元素的ScrollTop(卷上去的高度) + clientHeight (元素盒子模型的内容高度 content + padding) >= scrollHeight(元素能滚动的高度)
|
||||
parent.onscroll = function(){
|
||||
if (parent.scrollTop + parent.clientHeight > parent.scrollHeight - 10) {
|
||||
alert("到底部了")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user