目录
一、效果图
二、代码部分
1.html结构
2.css样式部分
3.js部分
三、代码总结
一、效果图
可以看出，在悠方滚动条滚动的时候，当高度打到一定高度的时候就会出现一个div盒子，就好像刚加载出来一样
而且可以一直向下滚动。
二、代码部分
1.html结构
<div class="box">content1</div>
<div class="box">content2</div>
<div class="box">content3</div>
<div class="box">content4</div>因为主要是后面通过js添加节点，所以结构很简单
2.css样式部分
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100vw;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box {
width: 1200px;
height: 500px;
background-color: rgb(195, 135, 235);
border-radius: 8px;
font-size: 30px;
text-align: center;
line-height: 500px;
margin-top: 20px;
color: #fff;
/* 添加过度效果 */
transition: transform .5s ease;
}
/* 偶数 */
.box:nth-child(even) {
transform: translateX(-200%);
}
/* 奇数 */
.box:nth-child(odd) {
transform: translateX(200%);
}
.box.show-center {
transform: translateX(0);
}
</style>注意:因为是将div分别向左右移动了，所以在body的样式中，要加一个width:100vw;overflow-x:hidden,这样就不会出现横向滚动条。
最后写了一个 show-center的类名，当满足条件的时候添加这个类名，就能让当前div居中显示。
3.js部分
<script>
//在页面加载完毕后执行一次滚动加载函数
window.onload = function () {
scrollLoad()
}
//监听滚动
window.addEventListener('scroll', scrollLoad)
//定义数值
var count = 5
//滚动加载函数
function scrollLoad() {
// 1.获取所有的box
var boxList = document.querySelectorAll('.box')
//2. 定义一个目标值
var targetValue = window.innerHeight * 0.8
//3.获取每一个box距离浏览器顶部的值
boxList.forEach(function (box) {
var boxTop = box.getBoundingClientRect().top
if (boxTop <= targetValue) {
box.classList.add('show-center')
} else {
box.classList.remove('show-center')
}
})
createBox()
}
//创建box函数
function createBox() {
//网页全文高度
var pageHeight = document.documentElement.scrollHeight
//滚动条被卷去的高度
var stop = document.documentElement.scrollTop;
//窗口高度
var seeHeight = window.innerHeight
//滚动条距离底部的高度
var bottom = pageHeight - stop - seeHeight
//如果高度小于200 就添加一个节点
if (bottom <= 200) {
var div = document.createElement('div')
div.classList.add('box');
div.innerHTML = 'content' + count;
count++
document.body.appendChild(div)
}
}
</script>1.在滚动函数：scrollLoad中 用到了getBoundingClientRect().top
getBoundingClientRect() //获取元素位置，这个方法没有参数
该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；
- top：元素上边到视窗上边的距离;
- right：元素右边到视窗左边的距离;
- bottom：元素下边到视窗上边的距离;
- left：元素左边到视窗左边的距离;
- width：是元素自身的宽
- height是元素自身的高
这里我们只关注它的top值，前面定了一个目标值targetValue为页面高度的80%，当当前元素的高度小于这个高度时，给它添加show-center类使它回到居中的位置，如果小于的话，就删除这个类。
2.createBox() 函数用来判断滚动条的高度，如果距离底部小于200px的话就创建一个新节点添加到body中。
这样一个一直滚动一直更新节点的效果就完成了。
三、代码总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100vw;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box {
width: 1200px;
height: 500px;
background-color: rgb(195, 135, 235);
border-radius: 8px;
font-size: 30px;
text-align: center;
line-height: 500px;
margin-top: 20px;
color: #fff;
/* 添加过度效果 */
transition: transform .5s ease;
}
/* 偶数 */
.box:nth-child(even) {
transform: translateX(-200%);
}
/* 奇数 */
.box:nth-child(odd) {
transform: translateX(200%);
}
.box.show-center {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="box">content1</div>
<div class="box">content2</div>
<div class="box">content3</div>
<div class="box">content4</div>
<script>
//在页面加载完毕后执行一次滚动加载函数
window.onload = function () {
scrollLoad()
}
//监听滚动
window.addEventListener('scroll', scrollLoad)
//定义数值
var count = 5
//滚动加载函数
function scrollLoad() {
// 1.获取所有的box
var boxList = document.querySelectorAll('.box')
//2. 定义一个目标值
var targetValue = window.innerHeight * 0.8
//3.获取每一个box距离浏览器顶部的值
boxList.forEach(function (box) {
var boxTop = box.getBoundingClientRect().top
console.log(box.getBoundingClientRect());
if (boxTop <= targetValue) {
box.classList.add('show-center')
} else {
box.classList.remove('show-center')
}
})
createBox()
}
//创建box函数
function createBox() {
//网页全文高度
var pageHeight = document.documentElement.scrollHeight
//滚动条被卷去的高度
var stop = document.documentElement.scrollTop;
//窗口高度
var seeHeight = window.innerHeight
//滚动条距离底部的高度
var bottom = pageHeight - stop - seeHeight
//如果高度小于200 就添加一个节点
if (bottom <= 200) {
var div = document.createElement('div')
div.classList.add('box');
div.innerHTML = 'content' + count;
count++
document.body.appendChild(div)
}
}
</script>
</body>
</html>感谢大家浏览！！！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
