滚动后显示div，并在页面末尾隐藏div
是一种常见的前端开发技术，用于在网页滚动时控制某个div元素的显示和隐藏。
实现这个效果可以通过监听页面的滚动事件，当滚动到一定位置时，显示目标div，否则隐藏目标div。
以下是一个实现滚动后显示div，并在页面末尾隐藏div的示例代码：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<style>
#targetDiv {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #f1f1f1;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div id="targetDiv">这是要显示的div</div>
<div style="height: 2000px;"></div>
<script src="script.js"></script>
</body>
</html>JavaScript代码（script.js）：
window.addEventListener('scroll', function() {
var targetDiv = document.getElementById('targetDiv');
var scrollHeight = document.documentElement.scrollHeight;
var clientHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + clientHeight >= scrollHeight - 100) {
targetDiv.style.display = 'none';
} else {
targetDiv.style.display = 'block';
}
});上述代码中，通过监听scroll事件，获取页面的滚动高度scrollTop、可视区域高度clientHeight和页面总高度scrollHeight。当滚动到页面末尾时（滚动高度加上可视区域高度大于等于页面总高度减去一个阈值），隐藏目标div；否则显示目标div。
这种滚动后显示div的效果常用于网页底部的浮动工具栏、回到顶部按钮等场景。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云前端开发相关产品：云开发
- 腾讯云后端开发相关产品：云函数
- 腾讯云软件测试相关产品：云测试
- 腾讯云数据库相关产品：云数据库 MySQL
- 腾讯云服务器运维相关产品：云服务器 CVM
- 腾讯云云原生相关产品：容器服务 TKE
- 腾讯云网络通信相关产品：私有网络 VPC
- 腾讯云网络安全相关产品：Web 应用防火墙 WAF
- 腾讯云音视频相关产品：云直播
- 腾讯云多媒体处理相关产品：云点播
- 腾讯云人工智能相关产品：智能图像处理
- 腾讯云物联网相关产品：物联网开发平台
- 腾讯云移动开发相关产品：移动推送
- 腾讯云存储相关产品：对象存储 COS
- 腾讯云区块链相关产品：区块链服务 BaaS
- 腾讯云元宇宙相关产品：腾讯云元宇宙解决方案
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
