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