开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在另一个页面下滚动的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

相关搜索:当div到达页面上的固定位置时停止滚动在提交页面上刷新到网页上的某个点？jQuery滚动到同一页面上的锚点功能，但直接转到不同的页面 404页面显示在中间件下的所有页面上 Jquery滚动位置如果到达单页网站的页面部分，则更改锚点链接颜色在新页面上，自动向下滚动到特定的div clip-用于在某个div下显示另一个div的路径如何使用平滑滚动将旋转滑块中的图像链接到同一页面上的div id？单击链接时，WordPress CPT在同一页面上显示div中的内容在不影响另一个DIV的情况下将页边距顶部添加到DIV 滚动:在页面上的特定位置更改div的不透明度(从0到1和vv)如何重定向到另一个页面(如果设置了字段)或在同一页面上显示错误(如果字段是空的)，在php中单击提交

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

控制页面的滚动:自定义下拉到刷新和溢出效果

通过阅读本文,你可以通过css 中overcroll-behavior属性值的设置,处理浏览器溢出滚动,以及禁用移动设备上刷新,下拉滚动时的发光和橡皮圈回弹效果,当然也可以看到css中 Houndini(胡迪宁),也就是css中也可以写变量等知识,如果文有误导的地方,欢迎路过的老师拍砖指正

02

【交互探讨】无限滚动还是分页展示，这是个问题！

我们都有过这样的经历。您可能有一个冗长的搜索结果、产品、订单或数据条目列表。虽然您已经使用各种筛选程序以及排序和搜索，但是您还是需要帮助客户查找相关条目。为此，您需要系统支持来加快条目浏览速度。

02

3分钟搞定图片懒加载

图片的懒加载就是在页面打开的时候，不要一次性全部显示页面所有的图片，而是只显示当前视口内的图片，一般在移动端使用（PC端主要是前端分页或者后端分页）。

02

摸鱼的新发现，滚动条无限滚动

上班摸鱼,下班摸鱼,一直摸一直爽。在一次调试的过程中,我按下了F12刚好是掘金的页面，然后把代码输入到控制台之后，顺手滚动了几下右侧的滚动条，发现个问题如下图所示:

04

不容忽视的 8 个 DOM API

文档对象模型（DOM）提供了许多强大的功能，在现代浏览器中无需外部依赖即可使用。在本文中，我们将探讨8个可能被忽视的DOM功能

02

小哥不满Google, 创建“另类”图书馆, 却因1000份白皮书苦恼不堪...

美国历史学家 Shelby Foote 曾说，一群聚集在图书馆周围的建筑组成了一所大学。这句话道出了一个极为简单的道理：图书馆不仅是信息存储和分类的地方，也是新知识产生的地方。

02

利用"交叉观察者"这个小宝贝儿，轻松实现懒加载、吸顶、触底

IntersectionObserver接口，提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法，祖先元素与视窗(viewport)被称为根(root);

02

Interection Observer如何观察变化

有很多精彩的文章探讨了如何使用Intersection Observer API，包括Phil Hawksworth，Preethi和Mateusz Rybczonek等。我这篇文章将讲一些不一样的东西。我在今年早些时候有幸向达拉斯VueJS聚会介绍了VueJS过渡组件，我在CSS-Tricks的第一篇文章就是以此为基础的。在演讲的问答环节中，有人问我基于滚动事件触发过渡怎么样 - 我说当然可以，但是一些听众建议我了解一下Intersection Observer。

02

【JS】322- 手把手教你实现前端惰性加载

在实际的项目开发中，我遇到了一个这样的需求：一个页面模块有很多列表数据展示，每条数据都带有图片，而首次展示的图片只需要不到10张，那么我们还要一次性把所有图片都加载出来吗？显然这是不对的，不仅影响页面渲染速度，还浪费带宽（因为需要对列表进行拖动排序，需加载出全部列表，不能做分页）。我们可以在浏览器滚动到一定的位置的时候进行下载，这也就是们通常所说的惰性加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。

03

手把手教你实现前端惰性加载

本文由 chunpengliu 首发于腾讯内部KM论坛，由 IMWeb 社区授权转载。点击阅读原文查看 IMWeb 社区更多精彩文章。从需求出发：在实际的项目开发中，我遇到了一个这样的需求：一个页面模块有很多列表数据展示，每条数据都带有图片，而首次展示的图片只需要不到10张，那么我们还要一次性把所有图片都加载出来吗？显然这是不对的，不仅影响页面渲染速度，还浪费带宽（因为需要对列表进行拖动排序，需加载出全部列表，不能做分页）。我们可以在浏览器滚动到一定的位置的时候进行下载，这也就是们通常所说的惰性加载

01

SCrollTOP scrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。

02

JQuery Div scrollTop ScrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。

01

[译]这几个CSS小技巧，你知道吗？

在网页设计和前端开发中，CSS属性是非常重要的一部分。掌握常用的CSS属性不仅可以使你的网页看起来更美观，还能提升用户体验，今天小编为大家介绍8个常见的CSS小技巧：

02

利用"交叉观察者"这个小宝贝儿，轻松实现懒加载、吸顶、触底

IntersectionObserver接口，提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法，祖先元素与视窗(viewport)被称为根(root);

04

你可能不知道，前端这6个有用的技术可以这么酷！

为了让大家编程更轻松一些，本挑选一些有用的但相对比较少见有用的技巧。废话不多说，开车了。

04

「实用推荐」如何优雅的判断元素是否进入当前视区

首先：编写一个 util 函数 isVisible，它将仅接收一个参数，即 element。

02

从 antDesign 来窥探移动端“滚动穿透”行为

上述是 MDN 中对于 overscroll-behavior 属性的描述，上述这段话恰恰描述了为什么会发生"滚动穿透"现象。

02

《从案例中学习JavaScript》之实现网页版阅读器

序现在手机上的文本阅读app已经非常丰富，良好的阅读体验与海量的书库常常令我感到无比兴奋。我想到8年前用一点几寸屏幕的mp3看电子书的情景，顿生一种淡淡的温馨。再久远一些，小的时候，我也经常和小伙伴们组团去书店看白书，也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书，在年幼的我眼里仿佛是比盘子里的午餐肉更加美味可口的东西。而在当今这个信息化的时代，看书变得空前的便利，可是儿时那种期待和兴奋的感受却消失在了时间的长河。岁月在流逝，时代在进步。愿放下所有的浮躁，在新的时代愉快地生活，无所谓明天怎

06

何为 content-visibility？

最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。

01

waypoint_使用jQuery Waypoint创建粘性导航标题

在本教程中，我们将创建一个导航栏，当您向下滚动时，它会陪伴您-我们还将在混合中添加一两个two头以对其进行修饰。

03

十万条数据，后端不分页咋办！（如何优化长列表渲染）

我们通常把一组数量级很大的数据叫做长列表，比如渲染一组上千条的数据，我们以数组的形式拿到这些信息，然后遍历渲染在页面上；

06

Selenium2+python自动化26-js处理内嵌div滚动条

前言前面有篇专门用js解决了浏览器滚动条的问题，生活总是多姿多彩，有的滚动条就在页面上，这时候又得仰仗js大哥来解决啦。一、内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子

07

2023 年了解即将推出的 CSS 功能

CSS 锚点定位是一项强大的新功能，可用于创建各种交互元素，例如工具提示、模式和弹出窗口。它使工具提示更加动态。这是一个小示例，展示了如何锚定定位以创建工具提示：

03

看完了 2021 CSS 年度报告，我学到了啥？

大家好，我是 ConardLi，一年一度的 CSS年度报告如期而至，我挑了一些我感兴趣的部分，和我一起来看看吧～

02

深入探寻Engagement奥秘 - 6个核心指标

本文长度为3170字，预估阅读时间9分钟。引言：本文分享了6个须在整个渠道中衡量的Engagement指标。翻译 | 张雨新审校 | 陈明艳编辑 | 华子 Engagement（参与度）一词

09

jquery获取元素到页面顶部的距离

在前端开发过程中，经常会遇到要求滚动条滚动到某位置时某按钮固定在页面上，否则悬浮于页面上。这时就会用到获取需要固定在页面位置的元素距离页面顶部的距离，通过比较文档滚动条到顶部的距离和页面元素到顶部距离的大小便可确定。

02

造一个 react-infinite-scroller 轮子

无限滚动是一个开发时经常遇到的问题，比如 ant-design 的 List 组件里就推荐使用 react-infinite-scroller 配合 List 组件一起使用。

03

vue上拉加载更多组件

我想，工作一段时间的都碰见过上拉加载更多需求，现在这种插件也蛮多的，也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题，就是下拉到最底部，刷新浏览器，浏览器会记住这个距离，从而触发上拉加载的方法。虽然这个小问题在正常情况下没什么影响，于是自己就研究研究，写了一个上拉加载更多的组件。

01

debounce与throttle区别

在2011年，Twitter网站曾爆出一个问题：在主页往下滚动时，页面会变得缓慢以致没有响应。John Resig发表了一篇文章《 a blog post about the problem》指出直接在scroll事件上面绑定高消耗的事件是一个多么愚蠢的想法。现在项目中大家都会对类似的scroll或者resize事件都进行了节流控制，下述是我们经常用到，也是《JavaScript高级程序设计》- JavaScript高级技巧中提及的节流方式。

04

jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

程序员都很赖，你懂的！最近在做html5页面的开发，主要做智能终端设备的开发。对于内容比较少的页面，领导提出了要将页眉和页脚定位到网页的最上方和最下方。对于这样的要求，其实一点也不过分。但对于新手来说，确实很难，很不容易，今天我就将我学习的内容一起分享一下！放置页眉和页脚的方式有三种： Inline - 默认。页眉和页脚与页面内容位于行内。 Fixed - 页面和页脚会留在页面顶部和底部。 Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部请使用 data-position 属性来定位页眉和页脚：看代码：

05

css写作建议和性能优化小结

还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐！之前写过js的写作建议和技巧，那么今天就来聊聊css吧！说到css，每一个网页都离不开css，但是对于css，很多开发者的想法就是，css只要能用来布局，把效果图排出来就可以了，其它的细节或者优化，不需要怎么考虑。但是我觉得css可不只是把页面的布局完成就是完事的，还需要考虑很多细节有优化，更不会像大家想得那么简单，在学习当中，如果发现什么技巧或者优化的点，我也会学以致用！那么今天，就分享下我总结的css写作建议和性能优化的一些问题！希望能帮让大家对神奇的css有一个新认识，当然，如果大家觉得还有什么其它的建议。欢迎指点！

02

防御式CSS是什么？这几点属性重点防御！

很多时候，我们希望有一种方法可以避免某种CSS问题或行为的发生。我们知道，网页内容是动态的，网页上的东西可以改变，从而增加了出现CSS问题或奇怪行为的可能性。

03

54个CSS重难点整理，12-24篇，进阶高薪必需要掌握的知识点

本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。

01

JavaScript 编程精解中文第三版十五、处理事件

有些程序处理用户的直接输入，比如鼠标和键盘动作。这种输入方式不是组织整齐的数据结构 - 它是一次一个地，实时地出现的，并且期望程序在发生时作出响应。

02

中高级前端面试题总结第一期

写在前面首先说明不是水文，我只是希望通过面试题的形式给你们看一些看似比较牛逼的概念，其实很简单的东西，我最近在写vue3的项目，所以等我写好之后我再更新vue3的教程，虽然早就想更新了，但是一直不是没有一个拿得出收的v3项目嘛，我也很着急的嘛，写完之后我就更新v3+vite+antdv的文章。 Vue中的组件和插件有什么区别定义不同： vue中组件是指.vue结尾的文件，一个合格的组件具备相对单一的功能，具有复用性强，耦合度低的特点，名字叫做components， vue中的插件是指用来扩展

02

RenderingNG中关键数据结构及其角色

大家好，我是柒八九。今天这篇文章是Chromium最新「渲染架构」 RenderingNG的译文系列文章的「第二篇」 -- 在RenderingNG渲染过程中关键数据结构和它们所担当的角色。

01

Scroll，你玩明白了嘛？

1、引言最近在实现列表的滚动交互时，算是被复杂的业务场景整得怀疑人生了。今天主要聊一下关于 scroll 的应用： CSS 平滑滚动 JS 滚动方法区分人为滚动和脚本滚动 2、CSS 平滑滚动 2.1 一行样式改善体验在一些滚动交互比较频繁的场景，我们可以通过在可滚动容器上增加一行样式来改善用户体验。 scroll-behavior: smooth; 比如说，在文档网站里，我们常使用 # 来去定位到对应的浏览位置。像上面这个例子，我们首先通过 # 去锚定对应内容，实现了一个 tab 切换的效果：

02

基于React与Redux的留言墙的实现

由于某事业群需要留言墙用于年会，同时需要调用大象公众号服务器接口，所以在今年年初开发了留言墙用于活动现场交流。

01

作用域 CSS 回来了

快来免费体验ChatGpt plus版本的，我们出的钱体验地址: https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

01

消费者决策路径完全看不懂？教你四种必备方法

引言：当你想有效地优化网站时，了解客户的旅程是至关重要的。这需要我们对客户数据进行深入的分析。好在这里有一系列的工具可以帮助到你。

CSS

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

01

js中的事件（event）

我们可以简单的把事件理解为浏览器的感知系统。比如说：他可以感觉到用户是否点击（click）了页面、鼠标是否进入了页面的某个元素上面（mouseover或mouseenter）、鼠标是否离开了网页（mouseout或mouseleave）、浏览器是都加载完了页面上的资源（window.onload)、文档树是否生成（DOMContentLoaded）、键盘上的某个键是否按下（keydown)、鼠标的滚轮是否滚动了等等。

03

React中将一直增加消息的滚动框保持在当前浏览的位置

在做业务开发时，经常会遇到这样的需求：某某某购买了该商品，某某某抽奖获得了什么，这类消息用来吸引用户。通常需要一个滚动框来展示所有消息，且每次的新消息都会展示在滚框的顶部，但同时这个消息滚动框还是可以

04

selenium 常见面试题以及答案

判断元素是否存在和是否出现不同，判断是否存在意味着如果这个元素压根就不存在，就会抛出NoSuchElementException

02

GOOGLE 跟踪代码管理器101 PART 6 – 真实的跳出率

主编前言：很多朋友都听说过Tag Management（监测代码管理），但其强大的功能和实现方式，了解的朋友不多。本系列以Google Tag Manager（GTM）为例，介绍如何实现集约化的Tag Management，从而实现更优化的监测代码配置。这是这个系列的最后一篇。关于如何利用GTM追踪页面的真实的跳出率。虽然我在写有关GTM的第5篇文章时就说过，那篇文章是GTM的最后一篇文章了。但是我现在又写了第6篇。不过，这篇是Google Tag Manager 101系列文章的最后一篇（当然，我会

04

【H5】344- 微信 H5 页面兼容性解决方案

当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。

03

实现单页浮动导航效果的 jQuery 插件：Smint

现在的网页设计中，浮动导航菜单被广泛应用了，通过它，可以可以快速移动到菜单，Smint 就是这样一个简单的 jQuery 插件，可以将导航菜单浮动在页面的顶部，点击菜单快速滚动到达页面的位置，并且能够设置滚动的速度。

03

导航栏滚动吸顶并自动高亮和点击跳转锚点

在阿里云的云市场页面上有一个效果，就是api导航栏当滚动条滚动到其所在位置时，自动吸顶，当滚动到下方所在导航栏指定的介绍时，自动高亮其导航栏。点击时则会滑动至其内容所在位置。具体效果为下图样式。

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭