文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

useLayoutEffect的秘密

前言 在React中针对DOM操作的最常见方法是使用refs来访问DOM节点，其实还有一种方法，就是使用useLayoutEffect来访问DOM节点，根据实际 DOM 测量（例如元素的大小或位置）来更改元素...「延迟加载」：将不是立即需要的资源推迟加载，比如在页面滚动到特定位置或用户执行某些操作时再加载。...浏览器从队列中抓取一个任务并执行它。如果有更多时间，它执行下一个任务，依此类推，直到在16.6ms 的间隙中没有更多时间为止，然后刷新屏幕。然后继续不停地工作，以便我们能够进行一些重要的事情。...然后，将此 HTML 注入要发送到浏览器的页面中，「一切都在服务器上生成」。...之后，浏览器下载页面，向我们显示页面，下载所有脚本（包括 React），随后运行它们，React 通过预生成的 HTML，为其注入一些互动效果，我们的页面就会变的有交互性了。

29110

详细设计一个文章页目录插件

首先需要根据文章内容的二级和三级标题生成目录； 然后，页面从上到下滚动过程中，需要在右侧目录里高亮当前的标题，而高亮的原则是当前标题所在的位置到浏览器可视区域顶部的距离需要小于或等于一个固定值，如上图所示...随着页面的滚动，目录将从头滚到尾，那么滚动的范围是从第一个子目录贴着滚动区域的顶部到最后一个子目录贴着滚动区域的底部为止； 当页面在最顶部的时候，当前高亮的子目录肯定是第一个，随着页面的向下滚动，高亮的位置也在不断下移...，当高亮位置移动到在目录滚动区域的上半部分之前，这段不进行目录滚动，如上面的图 ② 到 图 ③ 的变化过程； 当第一个子目录贴着滚动区域的顶部，且高亮位置在中位往下继续滚动的时候，需要进行目录滚动，滚动的距离是当前高亮目录所在位置距离滚动区域中间位置的高度差...我们知道页面滚动无非就是在当前这个位置的前提下，往上滚动或者向下滚动，如果我们把 nextOnIndex 记为滚动前的索引，在根据滚动方向进行加加减减不就可以很好的减少遍历次数嘛？...然后在实际页面里使用的时候，只需要引入 articleCatalog.js，然后直接用调用函数即可： articleCatalog() 当然调用的时候也支持传入一些参数，参数说明如下： articleCatalog

2.4K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    元素中必知重要属性和方法

    上一篇文章我们学习了 Angular 中自定义 Video 操作，如果读者留意的话，会发现在这篇文章中就开始操作元素的属性 scrollLeft，这是很常用的一样属性。...); // { // "0": "demo1", // "1": "demo2" // } 获取到类的列表后，我们可以对其进行 add, remove, replace 等操作，这在我们平常实际开发中很有用处的哦...Element.getBoundingClientRect() getBoundingClientRect() 方法返回元素的top, right, bottom 和 left是相对视口的位置。...5. mousedown() / mousemove() / mouseup() 在 pc 端的开发中，我们监听用户的事件最后的三个方法，在 Angular 中自定义 Video 操作文章中我们已经使用过...在 mobile 移动端开发的过程中，其对应的是 **touchstart() / touchmove() / touchend()**。

    68720

    后端接口一次返回10万条数据，前端应该如何处理？

    一些平台的博主经常分享这种问题如何处理，说实话，这种问题工作中几乎不可能遇到，数据都会进行分页处理，但不排除一些特殊的场景，比如要导出所有数据或是大屏慕展示所有数据什么的，如果遇到这种场景该如何处理呢？...文档片段； 以前，每次创建 div 元素时，都会通过 appendChild 将元素直接插入到页面中，但是 appendChild 是一项昂贵的操作。...实际上，我们可以先创建一个文档片段，在创建了 div 元素之后，再将元素插入到文档片段，创建完所有 div 元素后，将片段插入页中，这样做还可以提高页面性能。...延迟加载； 虽然后端一次返回这么多数据，但用户的屏幕只能同时显示有限的数据。所以我们可以采用延迟加载的策略，根据用户的滚动位置动态渲染数据。...同时，我们可以使用getBoundingClientRect来判断空白是否在页面底部。

    1.4K10

    前端-原生JS实现最简单的图片懒加载

    什么时候用懒加载 当页面中需要一次性载入很多图片的时候，往往都是需要用懒加载的。 懒加载原理 我们都知道HTML中的 标签是代表文档中的一个图像。。说了个废话。。...我们先不给 设置 src，把图片真正的URL放在另一个属性 data-src中，在需要的时候也就是图片进入可视区域的之前，将URL取出放到 src中。...如何判断元素是否在可视区域 方法一 网上看到好多这种方法，稍微记录一下。...方法二（推荐） 通过 getBoundingClientRect()方法来获取元素的大小以及位置，MDN上是这样描述的： The Element.getBoundingClientRect() method...函数节流 在类似于滚动条滚动等频繁的DOM操作时，总会提到“函数节流、函数去抖”。 所谓的函数节流，也就是让一个函数不要执行的太频繁，减少一些过快的调用来节流。

    5.1K30

    【前端词典】4 （+1）种滚动吸顶实现方式的比较

    scrolloTop() 有兼容性问题，在微信浏览器、IE、某些 firefox 版本中 $('html').scrollTop() 的值会为 0，于是乎也就有了第三种方案的兼容性写法。...四、使用 obj.getBoundingClientRect().top 实现 定义： 这个 API 可以告诉你页面中某个元素相对浏览器视窗上下左右的距离。...使用： tab 吸顶可以使用 obj.getBoundingClientRect().top 代替 scrollTop-offsetTop,代码如下： // htmldiv class="pride_tab_fixed...描述： 当页面往下滚动时，吸顶元素需要等页面滚动停止之后才会出现吸顶效果 当页面往上滚动时，滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样，而等页面停止滚动之后才会恢复原样 原因：在 ios 系统上不能实时监听...大概支持了 60% 以上，在项目中还是可以使用的（你需要做好兼容性处理）。 关于 IntersectionObserver 如何使用，请看 MDN 或者 阮一峰教程。

    2.2K30

    原生 JS 实现最简单的图片懒加载

    什么时候用懒加载 当页面中需要一次性载入很多图片的时候，往往都是需要用懒加载的。 懒加载原理 我们都知道HTML中的 标签是代表文档中的一个图像。。说了个废话。。...我们先不给 设置 src，把图片真正的URL放在另一个属性 data-src中，在需要的时候也就是图片进入可视区域的之前，将URL取出放到 src中。...如何判断元素是否在可视区域 方法一 网上看到好多这种方法，稍微记录一下。...方法二（推荐） 通过 getBoundingClientRect()方法来获取元素的大小以及位置，MDN上是这样描述的： The Element.getBoundingClientRect() method...函数节流 在类似于滚动条滚动等频繁的DOM操作时，总会提到“函数节流、函数去抖”。 所谓的函数节流，也就是让一个函数不要执行的太频繁，减少一些过快的调用来节流。

    3K20

    【前端词典】4 种滚动吸顶实现方式的比较

    2、如何使用？...四、使用 obj.getBoundingClientRect().top 实现 定义： 这个 API 可以告诉你页面中某个元素相对浏览器视窗上下左右的距离。...使用： tab 吸顶可以使用 obj.getBoundingClientRect().top 代替 scrollTop-offsetTop,代码如下： // htmldiv class="pride_tab_fixed...（保存变量）； 在使用的时候可能出现 DOM 没有初始化，就读取了该属性，这个时候会返回 0；对于这个问题我们需要等到 DOM 元素初始化完成后再执行。...描述： 当页面往下滚动时，吸顶元素需要等页面滚动停止之后才会出现吸顶效果 当页面往上滚动时，滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样，而等页面停止滚动之后才会恢复原样 原因：在 ios 系统上不能实时监听

    2.5K60

    JavaScript 获取鼠标及元素在页面上的位置

    HTML5学堂：JavaScript获取鼠标的位置，大家会想到clientX/Y等属性，灵活的获取鼠标的位置信息，能够便于我们实现各种复杂的页面交互效果，到底还有哪些属性可以获取鼠标的位置信息？...另外，还有哪些能快速获取标签在页面中的位置信息？ 在书写一些“拖拽”页面交互效果，比如常见的拖拽效果、自定滚动条、放大镜等效果，都需要用到了鼠标或元素在页面上的位置信息。...另外，也要跟大家分享一个方法，它能快速的获取元素在页面上的位置信息，不同于之前学过的offsetLeft等属性，它就是——getBoundingClientRect()方法 回顾clientX/Y获取鼠标位置的方式...就是这一点，导致我们使用起来灵活性不高，不是所有页面交互效果用到的鼠标位置都是参考浏览器可视区域的左上角，有可能是参考自身元素的左上角，那么clientX/Y属性能否胜任呢？...今天要给大家分享的是另外一种快速获取元素在页面上的位置，赶紧尝试书写一下下面的实例 代码实例： <!

    3.4K60

    一次useEffect引发浏览器执行机制的思考

    抛出"问题" 我们先来阐述阐述问题,今儿在写一个有关于新手指引的公用组件，类似于这样的形式: 我相信大家首先想到的思路就是在useEffect中通过getBoundingClientRect()获得对应传入元素... html> 复制代码 代码其实很简单，就是在js脚本中定时器中获取h1标签。...执行完毕拿到的就是正确的位置getBoundingClientRect()。...偶发非正常情况分析 我们来看看偶发非正常getBoundingClientRect打印的结果: 要解释清楚这个问题，我们首先来看看html中js文件和css文件的顺序: 这是html中的head标签中加载两个脚本的顺序...当我们执行js时页面上并不存在任何样式，此时我们通过getBoundingClientRect获取的值自然是不正确的（其实获取的就是不存在样式时候的位置值）。

    96210

    蜕变之始，useEffect 最后一种用法

    React 开发指导思想是数据驱动 UI，因此在 React 程序中，我们总是会思考如何设计与 UI 保持一致的数据，把解决问题的重心放在数据逻辑上。 但是这样的思路并不能应对所有场景。...在一些特殊的场景里，我们需要跳出数据驱动 UI 的解题思路，例如为了避免出现性能瓶颈，在高频率的事件监听中，我们会选择直接使用原生 DOM 节点来解决问题 意思就是说，如果你想要跳出 React 的环境使用其他的方式开发...2 需求 在长页面滚动的过程中，我们常常会在页面的顶部或者旁边，放一个标识组件来告诉用户页面已经滚动到什么位置了。 在滚动的过程中，当前选中状态会自动变化到对应的位置。...对于原生 DOM 而言，我们可以使用 getBoundingClientRect 来获取元素对象在可视区域中的位置信息 本案例中的判断规则非常简单粗暴，因此当同屏出现两个目标元素时会存在规则冲突，实践中的规则设计会更细致一些...div ref={n1}> div> 在页面滚动的过程中，目标元素相对于可视区域的位置会随时发生变化。

    14910

    懒加载 React 长页面 - 动态渲染组件

    设计思路 假设页面预期渲染 n 个组件，每个组件均会触发请求其他接口。设计这样一个长页面，我们主要会面临以下两个问题： 渲染下一屏组件的时机应该如何判断？...在数据反复更新的过程中，如何让组件不重复发起数据请求？ ? 图 1 一、渲染下一屏的时机 1....Loading 组件是否在视图内 如图 1 所示，当 loading 组件的位置滚动到视图中时，并且如果此时还有未渲染的组件，这时便是渲染下一屏的时机。...Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。...在写一个普通的长页面的过程中，如果只追求完成，那么将会非常简单，但如果想要进一步优化，那可做的事情就有很多了。

    3.5K20

    如何获取 HTML 元素相对于浏览器窗口的位置？

    大家好，今天我们来聊一聊前端开发中一个常见但又非常实用的小技巧：如何获取 HTML 元素相对于浏览器窗口的位置。...使用 getBoundingClientRect 方法 getBoundingClientRect 方法可以获取元素相对于视口（viewport）的大小和位置。...element-box-diagram 示例场景：悬浮提示框的位置计算 假设你在开发一个带有悬浮提示框的页面，当用户悬停在某个按钮上时，提示框需要出现在按钮的下方。...const div = document.querySelector('div'); console.log(div.offsetLeft, div.offsetTop); 示例场景：多层嵌套布局 假设你在开发一个多层嵌套布局的页面...，你应该了解了几种获取 HTML 元素位置的方法以及它们的实际应用场景。

    22910

    动手练一练，手写一个价格对比、固定表头滚动的表格

    今天我们将通过一个界面十分漂亮功能价格对比的表格，展示固定表头的功能，实例操作展示如视频所示，当滚动条滚动至表格位置，添加表头固定样式，当滚动至表格底部，移除固定表头样式。...pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。...scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。...用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。...小节 到此，我们一起完成了这个案例，通过本案例，我们学会了如何使用原生的方式动态实现固定元素，并在一定的时机取消固定。

    3.2K31

    抛开插件，你真的懂拖动怎么实现吗？

    回到正题，本章将分享一些关于 Javascript 中拖动的内容，探索拖动过程的奥秘。 元素拖动 刚开始，咱们循序渐进，先来实现一个最简单的功能，让一个元素变成可拖动元素。 布局与样式： 页面时，pageX 的值会改变，因为它考虑了滚动的距离。 简而言之，就是要不要考虑滚动条的问题，如果你想要获取鼠标指针相对于整个页面的位置，应该使用 pageX。...这里用上了 getBoundingClientRect[7] API，其作用是为了优化前面在 mouseMoveHandler 函数中，需要不断去记录鼠标上一个位置的繁琐过程。...大概二者的区别如下： 1️⃣ 拖动元素的位置 = 拖动元素原本位置 + 拖动距离 2️⃣ 拖动元素的位置 = 根据鼠标最新位置直接计算拖动元素的最新位置 = 鼠标最新位置 - 鼠标在拖动元素上的距离 鼠标在拖动元素上的距离...这是关键点，我们要如何知道拖动元素是往上还是往下呢❓并且交换元素位置的时机如何把握呢❓ 看如下图，假设了中间三个元素的中心点坐标分别如下图。

    7310

    React项目中如何实现一个简单的锚点目录定位

    前言 锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节 如何在React中实现锚点定位和平滑滚动 目录自动高亮的实现思路 处理顶部导航遮挡锚点的解决方案 服务端渲染下的实现方案...可以得到元素相对于视窗的位置信息,根据位置判断是否在可见区域内,如果是就更新activeChapter状态,从而触发目录的高亮效果。...IntersectionObserver 使用IntersectionObserver提供的异步回调,只在章节进入或者离开可视区域时才执行位置计算: import { useRef, useEffect...在使用了服务端渲染(SSR)的框架如Next.js等情况下,实现锚点定位和目录联动也会有一些不同。...服务端渲染的静态HTML中,并没有绑定滚动事件,所以无法自动高亮。 预取数据 首先,我们需要解决点击目录链接的问题。 既然服务端无法获取组件ref,那就需要在客户端去获取元素位置。

    1.2K20

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

    2021-01-16 07:37:33 在阿里云的云市场页面上有一个效果，就是api导航栏当滚动条滚动到其所在位置时，自动吸顶，当滚动到下方所在导航栏指定的介绍时，自动高亮其导航栏。...我这次采用的是react来写，具体思路都是相同的，无论你用的是vue还是angular 还是使用jq还是原生js，都是一样的。...的地址，因为当导航栏吸顶时，此处会因为空出位置，下面内容上移，而产生不和谐的效果，我们需要在其吸顶的同时增加一个div来占位，以增加平滑的效果。...let outerItemReact = selectItem.getBoundingClientRect(); //判断导航内容是在可视区域上方还是下方，来决定滚动条是应该向上滚动还是向下滚动...，同时点击导航栏滚动条缓动至锚点位置，实现的最终效果可以看阿里云市场详情页中的效果，比他显示的效果多了滚动条缓动效果。

    10.5K50

    前端面试实录CSS篇（最近一周）

    加载差异：link 引用的 css,在页面加载时同时加载。而 @import 在页面加载完后才加载 3. 兼容性：link 是 html 标签，没有兼容问题。...aquamarine; } /* @import "03.css"; */ • 在页面中：不存在权重问题，谁在最低下就使用谁的样式 的过程中，页面会根据浏览器的宽度和高度重新渲染页面。 8. 对 BFC 的理解，如何创建 BFC？...与 fixed 的根元素不同，absolute 的根元素可设置，fixed 的根元素是html • 在有滚动的页面中，absolute 会跟随父元素进行滚动，而 fixed 固定在某个位置 27....• 1px 问题的本质：在一些 Retina 屏幕上，移动端页面的 1px 会变得很粗，所呈现出来不止是 1px 的效果，原因就是 CSS 中的 1px 不能和移动端的 1px 划等号，他们之间是有一个比例关系

    11210

    2018年前端面试总结

    再有两个月，2018就快过完了，因而有必要在年末对2018年的前端学习做一个总结，本文主要从前端面试中的一些基础知识来对前端进行相关的总结。本文根据网络面试题进行总结。...在选择标签时请遵循以下原则： 1.尽可能少的使用无语义的标签div和span； 2.在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利； 3.不要使用纯样式标签...dom.getBoundingClientRect().width/height 　　这种方式是根据元素在视窗中的绝对位置来获取宽高的。...bug：包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。...服务器可根据请求者 (user agent)选择一项操作，或提供操作列表供请求者选择。 301 （永久移动） 请求的网页已永久移动到新位置。

    72920
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券