页面内有盒子1铺满了这个屏幕，然后在盒子1下方20vh的地方有一个盒子2，当页面向下滚动到盒子2显示出来的时候，盒子2回有缓慢向上移动出现的效果
这样？
<!doctype html>
<style>
html,body{margin:0}
body{height:3000px}
.box1{height:100vh;background:#eee;margin-bottom:20vh}
.box2{background:#ccc;height:200px;transition:margin 1s ease-in-out}
.box2.show{margin-top:-20vh}
</style>
<div class="box1"></div>
<div class="box2"></div>
<script>
window.addEventListener('load', () => {
let box2 = document.querySelector('.box2'), offsetTop = box2.offsetTop, viewHeight = document[document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body'].clientHeight;
window.onresize = function () { viewHeight = document[document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body'].clientHeight}
window.onscroll = function () {
var scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) + viewHeight;
if (scrollTop < offsetTop)
box2.classList.remove('show')
else
box2.classList.add('show')
}
})
</script>
贴代码看看，怎么会有这种事情发生
该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
您可以使用 CSS3 的 transform 属性和 JavaScript 的事件监听来实现盒子2在页面滚动时出现的动画效果。
首先，在 HTML 中定义两个盒子：
<div class="box1"></div>
<div class="box2"></div>
然后，在 CSS 中设置盒子1铺满屏幕，盒子2位于屏幕下方20vh的位置：
.box1 {
height: 100vh;
background-color: #ccc;
}
.box2 {
height: 100px;
width: 100px;
background-color: #f00;
position: absolute;
bottom: -20vh;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease-out;
}
在上面的 CSS 代码中，我们使用了 position: absolute 属性将盒子2定位在屏幕底部，并使用 bottom: -20vh 将其下移 20vh。transform: translateX(-50%) 属性将盒子2水平居中，transition: transform 0.5s ease-out 属性表示在 transform 属性变化时使用缓动效果过渡。
接下来，在 JavaScript 中监听页面滚动事件，当滚动到盒子2时，将盒子2的 transform 属性设置为 translateY(0)，使其向上移动出现：
var box2 = document.querySelector(".box2");
window.addEventListener("scroll", function() {
var box2Top = box2.getBoundingClientRect().top;
var windowHeight = window.innerHeight;
if (box2Top < windowHeight - 100) {
box2.style.transform = "translateY(0)";
}
});
在上面的 JavaScript 代码中，我们使用了 getBoundingClientRect() 方法获取盒子2相对于视口的位置，并使用 window.innerHeight 获取视口高度。当滚动到盒子2时，将盒子2的 transform 属性设置为 translateY(0)，使其向上移动出现。
完整的 HTML、CSS 和 JavaScript 代码如下：
<div class="box1"></div>
<div class="box2"></div>
<style>
.box1 {
height: 100vh;
background-color: #ccc;
}
.box2 {
height: 100px;
width: 100px;
background-color: #f00;
position: absolute;
bottom: -20vh;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease-out;
}
</style>
<script>
var box2 = document.querySelector(".box2");
window.addEventListener("scroll", function() {
var box2Top = box2.getBoundingClientRect().top;
var windowHeight = window.innerHeight;
if (box2Top < windowHeight - 100) {
box2.style.transform = "translateY(0)";
}
});
</script>
如果以上回答对您有所帮助，点击一下采纳该答案～谢谢
我推荐你使用wow.js 这个滚动插件来实现页面滚动效果，你去搜一下
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！