在另一个页面下滚动的div曾经到达页面上的某个点
，这是一种常见的前端开发需求，可以通过监听滚动事件来实现。
首先，我们需要获取滚动容器的位置信息和滚动条的位置信息。可以使用JavaScript中的scrollTop属性来获取滚动条的垂直位置，以及offsetTop属性来获取滚动容器相对于文档顶部的垂直位置。
然后，我们可以在滚动事件中判断滚动条的位置是否超过了目标点的位置。如果超过了目标点的位置，我们可以执行相应的操作，比如添加CSS类名或者触发某个事件。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.scroll-div {
height: 500px;
overflow-y: scroll;
}
.target-div {
height: 200px;
background-color: yellow;
}
.reached {
background-color: green;
}
</style>
</head>
<body>
<div class="scroll-div" onscroll="checkScroll()">
<div style="height: 1000px;"></div>
<div class="target-div"></div>
<div style="height: 1000px;"></div>
</div>
<script>
function checkScroll() {
var scrollDiv = document.querySelector('.scroll-div');
var targetDiv = document.querySelector('.target-div');
var scrollPosition = scrollDiv.scrollTop;
var targetPosition = targetDiv.offsetTop;
if (scrollPosition >= targetPosition) {
targetDiv.classList.add('reached');
} else {
targetDiv.classList.remove('reached');
}
}
</script>
</body>
</html>在上述示例中，我们创建了一个滚动容器（.scroll-div），其中包含了一个目标div（.target-div）。当滚动条滚动到目标div的位置时，目标div的背景颜色将变为绿色（.reached类）。
这只是一个简单的示例，实际应用中可以根据需求进行相应的扩展和优化。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云前端开发相关产品：https://cloud.tencent.com/product/web
- 腾讯云后端开发相关产品：https://cloud.tencent.com/product/scf
- 腾讯云软件测试相关产品：https://cloud.tencent.com/product/cts
- 腾讯云数据库相关产品：https://cloud.tencent.com/product/cdb
- 腾讯云服务器运维相关产品：https://cloud.tencent.com/product/cvm
- 腾讯云云原生相关产品：https://cloud.tencent.com/product/tke
- 腾讯云网络通信相关产品：https://cloud.tencent.com/product/vpc
- 腾讯云网络安全相关产品：https://cloud.tencent.com/product/ddos
- 腾讯云音视频相关产品：https://cloud.tencent.com/product/vod
- 腾讯云多媒体处理相关产品：https://cloud.tencent.com/product/mps
- 腾讯云人工智能相关产品：https://cloud.tencent.com/product/ai
- 腾讯云物联网相关产品：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发相关产品：https://cloud.tencent.com/product/mgwx
- 腾讯云存储相关产品：https://cloud.tencent.com/product/cos
- 腾讯云区块链相关产品：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙相关产品：https://cloud.tencent.com/product/vr
相关·内容
vue css 滚动楼层导航定位
理解滚动图
左右结构
<template>
源码文件：
Scrollspy.js
实现功能
1、当滚动区域内设置的hashkey距离顶点到有效位置时，就关联设置其导航上的指定项
2、导航必须是 .nav > li > a 结构，并且a上href或data-target要绑定hashkey
3、菜单上必须有.nav样式
4、滚动区域的data-target与导航父级Id（一定是父级）要一致
领取专属 10元无门槛券 手把手带您无忧上云
<li
02bootstrap源码分析之scrollspy（滚动侦听）
<ul class="nav navbar-nav010扫码
添加站长 进交流群
相关资讯
热门标签
活动推荐
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
腾讯云开发者
