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

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

前言 锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节 如何在React中实现锚点定位和平滑滚动 目录自动高亮的实现思路 处理顶部导航遮挡锚点的解决方案 服务端渲染下的实现方案...可以让元素的父容器自动滚动,将这个元素滚动到可见区域。...此时就需要实现锚点定位和目录的联动效果: 点击目录时,自动滚动到对应的章节 滚动页面时,自动高亮正在浏览的章节 目录导航组件 目录导航本身是一个静态组件,我们通过props传入章节数据: function...服务端渲染的静态HTML中,并没有绑定滚动事件,所以无法自动高亮。 预取数据 首先,我们需要解决点击目录链接的问题。 既然服务端无法获取组件ref,那就需要在客户端去获取元素位置。...这样我们就可以在点击目录链接时,正确滚动到对应的章节位置了。 数据注水 但是点击目录只解决了一半问题,滚动高亮还需要解决。 这里就需要用到数据注水的技术。

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

    React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能

    嵌入pdfjs] 代码简单讲解下 getDocument 去请求pdf的内容 getPage 获取对应页面的内容 使用 canvas 绘制当前页面 扩展阅读：《顶级开源 react ui 组件库测评推荐...点击对应页滚动到指定的位置 滚动到对应位置，高亮当前页 先看下最终的效果 [React PDFjs 搭建效果] 首先实现点击滚动到对应的位置，非常的简单，利用 scrollIntoView api 可以快速定位到指定位置...scrollIntoView({ behavior: 'smooth' }) } 再来实现下滚动位置自动高亮页数 本质上是使用 IntersectionObserver api 来完成，监听每个页面的可见性...Echarts 使用教程 - 如何在 React 加入图表 》 React PDF 在线预览源代码 本次教程的代码可以在 github 上查看 假如你只需要预览 PDF 并且不关心浏览器兼容，那么使用...table 表格组件测评推荐》 React PDFjs 搭建总结及卡拉云 本文介绍了如何在 React 中实现 PDF 预览功能。

    5.1K20

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

    背景 长页面在前端开发中是非常常见的。例如下图中的电商首页，楼层数据来自运营人员在后台的配置，楼层数量是不固定的，同时每个楼层可能会依赖更多翻页数据。...在这种情况下，如果一次性将页面全部渲染，可想而知，我们的页面直出效率（fmp, fid）会受到影响。 为了更好的用户体验，我们需要考虑在用户滚动到下一屏时，渲染下一屏的组件。 ?...设计思路 假设页面预期渲染 n 个组件，每个组件均会触发请求其他接口。设计这样一个长页面，我们主要会面临以下两个问题： 渲染下一屏组件的时机应该如何判断？...在数据反复更新的过程中，如何让组件不重复发起数据请求？ ? 图 1 一、渲染下一屏的时机 1....在写一个普通的长页面的过程中，如果只追求完成，那么将会非常简单，但如果想要进一步优化，那可做的事情就有很多了。

    3.5K20

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

    React 开发指导思想是数据驱动 UI，因此在 React 程序中，我们总是会思考如何设计与 UI 保持一致的数据，把解决问题的重心放在数据逻辑上。 但是这样的思路并不能应对所有场景。...2 需求 在长页面滚动的过程中，我们常常会在页面的顶部或者旁边，放一个标识组件来告诉用户页面已经滚动到什么位置了。 在滚动的过程中，当前选中状态会自动变化到对应的位置。...接下来我们思考一下这样的功能应该如何实现。 本案例具体要实现的效果如图 3 实现 实现原理比较简单，我们只需要判断每个元素什么时候应该出现在屏幕中即可。... 在页面滚动的过程中，目标元素相对于可视区域的位置会随时发生变化。...`${s.item} ${s.active}` : s.item}>案例一 这样，我们只需要在滚动过程中，不停的判断每个目标元素和视口的相对位置，当符合条件的目标元素出现在视口时，就设置

    14310

    图解浏览器的各种距离

    网页开发中，我们经常要计算各种距离。...比如 OnBoarding 组件，我们要拿到每一步的高亮元素的位置、宽高： 比如 Popover 组件，需要拿到每个元素的位置，然后确定浮层位置： 比如滚动到页面底部，触发列表的加载，这需要拿到滚动的距离和页面的高度...首先，页面一般都是超过一屏的，右边会出现滚动条，代表当前可视区域的位置： 这里窗口的部分是可视区域，也叫做视口 viewport。 如果我们点击了可视区域内的一个元素，如何拿到位置信息呢？...我们只看 y 轴方向好了，x 轴也是一样的。 事件对象可以拿到 pageY、clientY、offsetY，分别代表到点击的位置到文档顶部，到可视区域顶部，到触发事件的元素顶部的距离。..., useEffect, useRef } from 'react' function App() { const ref = useRef(null); const

    15410

    第三次重写个人网站，分享一些感想

    这篇文章会聊一聊网站中每个部分的实现思路，以及会说到我对设计的一些想法和思路。 如果你也想写自己的个人主页，希望这篇文章可以给你一些灵感。...: TypedOptions) => { const el = useRef(null); // span 元素 const typed = useRef...左、中、右分别是 、、，简单。其中，左边中间那个正方体依然是个 Lottie 动画，右边的 “海怪” 用的是 HongLei 字体库。...0.8); } 75% { transform: scale(0.95, 1.05); } } Contact - 找到我 contact.gif 因为上面几个 section 的背景都是跟随页面滚动的...下面部分带有强烈主观色彩，不一定正确 我在主页里加入了很多入场动画，用到的库是 react- reveal。 这个库的功能是：当滚动到当前元素时，使用动画入场效果展示元素。 很实用的一个库。

    1K50

    React 进阶 - 海量数据处理和其他细节

    PC 端一种常见的数据请求加载场景，这种数据交互有一个问题就是，如果没经过处理，加载完成后数据展示的元素，都显示在页面上，如果伴随着数据量越来越大，会使页面中的 DOM 元素越来越多，即便是像 React...虚拟列表，在长列表滚动过程中，只有视图区域显示的是真实 DOM ，滚动过程中，不断截取视图的有效区域，让人视觉上感觉列表是在滚动，达到无限滚动的效果。...（除了缓冲区），剩下的区域，不需要渲染真实的 DOM 元素 虚拟列表就是通过这个方式来减少页面上 DOM 元素的数量 实现思路 通过 useRef 获取元素，缓存变量 useEffect 初始化计算容器的高度...> ) } } # 节流 节流函数一般也用于频繁触发的事件中，比如监听滚动条滚动。...在 Vue.js 中有专门的 dep 做依赖收集，可以自动收集字符串模版的依赖项，只要没有引用的 data 数据， 通过 this.aaa = bbb ，在 Vue.js 中是不会更新渲染的。

    1.4K10

    第三次重写个人网站，分享一些感想

    这篇文章会聊一聊网站中每个部分的实现思路，以及会说到我对设计的一些想法和思路。 如果你也想写自己的个人主页，希望这篇文章可以给你一些灵感。...: TypedOptions) => { const el = useRef(null); // span 元素 const typed = useRef...左、中、右分别是 、、，简单。其中，左边中间那个正方体依然是个 Lottie 动画，右边的 “海怪” 用的是 HongLei 字体库。...scale(1.2, 0.8); } 75% { transform: scale(0.95, 1.05); } } Contact - 找到我 因为上面几个 section 的背景都是跟随页面滚动的...下面部分带有强烈主观色彩，不一定正确 我在主页里加入了很多入场动画，用到的库是 react-reveal。这个库的功能是：当滚动到当前元素时，使用动画入场效果展示元素。 很实用的一个库。

    86020

    React高手都善于使用useImprativeHandle

    在 React Hooks 中，useImperativeHandle 是一个非常简单的 hook，他比较小众，刚开始接触 React 学习的朋友可能并不熟悉他。...现在我们要实现如下效果，当点击 Edit 按钮时，输入框自动获得焦点 我们知道，在 DOM 中，只要得到 input 对象，然后就可以调用 .focus() 方法来实现目标。...当点击按钮时，我希望下方的 input 自动获得焦点，并切中间的滚动条滚动到最底部。 现在，我们结合前面的知识来分析一下这个案例应该如何实现。.../> 我们期望点击按钮时，信息部分的输入框自动获取焦点，信息部分的信息展示区域能滚动到最底部，因此整个页面组件的代码可以表示为如下： import { useRef } from 'react...05 Lottie 我上上周周末直播分享了在小程序中如何实现 lottie 动画并封装成为简单易用的 React 组件。

    33710

    10分钟教你手写8个常用的自定义hooks

    本文是一篇以实战为主的文章，主要讲解实际项目中如何使用hooks以及一些最佳实践，不会一步步再介绍一遍react hooks的由来和基本使用，因为写hooks的文章很多，而且官网对于react hooks...，这样可以让用户更好的知道页面的主题和内容。...实现自定义的useScroll 自定义的useScroll也是高频出现的问题之一，我们往往会监听一个元素滚动位置的变化来决定展现那些内容，这个应用场景在H5游戏开发中应用十分广泛，接下来我们来看看实现代码...，这个我们可以在函数组件中采用ref和useRef来获取到，钩子返回了滚动的x，y值，即滚动的左位移和顶部位移，具体使用如下： import React, { useRef } from 'react'..."> { x }, { y } } 通过使用useScroll，钩子将会帮我们自动监听容器滚动条的变化从而实时获取滚动的位置

    3K20

    手把手带你10分钟手撸一个简易的Markdown编辑器

    「编辑区」和「展示区」的页面同步滚动 编辑器工具栏中工具的实现 这里先放上我最终实现好了的效果图： ?...其实是没问题的，被解析好的 html字符串 每个标签都被附带上了特定的类名，只是现在我们引入任何的样式文件，例如下图 ?...官方文档 (opens new window)，这个库能帮你做的就是检测代码块标签元素，并为其加上特定的类名。...，这样就可以在 handleScroll 方法里区分此次滚动是被动触发的还是主动触发的了 import React, { useState, useRef, useEffect } from 'react...) = 300，此时的展示区也同步滚动到了最底部，这样就实现了真正的同步滚动了 来看一下改进后的代码 import React, { useState, useRef, useEffect } from

    2K10

    手把手带你10分钟手撸一个简易的Markdown编辑器

    「编辑区」和「展示区」的页面同步滚动 编辑器工具栏中工具的实现 这里先放上我最终实现好了的效果图： 我也将本文的代码放在了 Github 仓库 (opens new window)上了，欢迎各位点个...)，这个库能帮你做的就是检测代码块标签元素，并为其加上特定的类名。...import React, { useState, useRef, useEffect } from 'react' import markdownIt from 'markdown-it' import...，这样就可以在 handleScroll 方法里区分此次滚动是被动触发的还是主动触发的了 import React, { useState, useRef, useEffect } from 'react...) = 300，此时的展示区也同步滚动到了最底部，这样就实现了真正的同步滚动了 来看一下改进后的代码 import React, { useState, useRef, useEffect } from

    1.5K20

    纯滚动怎么理解_scrollview不滚动

    本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight 　　scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分 scrollWidth...　　scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分 　　[注意]IE7-浏览器返回值是不准确的 　　【1】没有滚动条时，scrollHeight与clientHeight...，但元素设置宽高小于元素内容宽高，即存在内容溢出的情况时，scroll属性大于client属性 　　[注意]scrollHeight属性存在兼容性问题，chrome和safari浏览器中，scrollHeight...> scrollIntoViewIfNeeded() 　　scrollIntoViewIfNeeded(true)方法只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。...(1);} btn2.onclick = function(){test.scrollByPages(-1);} 滚动事件 　　scroll事件是在window对象上发生的，它表示的是页面中相应元素的变化

    1.9K20

    美丽的公主和它的27个React 自定义 Hook

    另一个优点是存储数据与组件状态之间的自动同步。每当存储的数据发生更改时，该钩子会相应地更新组件的状态。同样，当组件的状态发生更改时，该钩子会自动将新值持久化到存储中。...例如，在倒计时组件中,以轻松地实现在特定持续时间后重置的计时器。...它接受一个可选的options参数，以自定义地理位置行为，允许我们根据特定需求微调准确性和其他设置。 该钩子自动处理加载状态，当获取地理位置数据时更新它，并在过程中出现任何问题时设置错误状态。...使用场景 我们可以在我们希望触发动画、延迟加载图像或在用户滚动时加载额外内容的情况下，使用这个Hook。 要使用这个钩子，首先将其导入到我们的组件文件中。...修改此元素的高度，使页面可滚动，在滚动过程中，可查看待验证元素的可见性 待验证元素 {visible && "(Visible

    66320

    来自 React 19 的背刺：forwardRef 被无情抛弃

    React 中的 控制反转 IOC forwardRef 基础知识 React 19 中 ref 机制更改，forwardRef 被无情抛弃 useImperativeHandle 与 ref 的新配合...全文共 3206 字，阅读预计花费 6 分钟 1、React 中的控制反转 在面向对象编程中，IOC (Inversion of Control) 控制反转是一个非常高级的概念。...因此，在 React 的组件封装中，并不支持直接获取到 input 的引用，而是以一种传入控制器的方式来调用它。...如果不传入依赖项，那么每次更新 createHandle 都会重新执行 在官方文档中，有这样一个案例，演示效果如图所示，当我点击按钮时，下方的 input 自动获取焦点，并且中间的滚动条滚动到最底部。...> Write a comment 我们期望点击按钮时，信息部分的输入框自动获取焦点，信息部分的信息展示区域能滚动到最底部，因此整个页面组件的代码可以表示为如下

    55210

    玩转react-hooks,自定义hooks设计模式及其实战

    今天给大家讲讲我在工作中对react-hooks心得，和一些自定义hooks的设计思想，把在工作中的经验分享给大家。 自定义hooks设计 又回到那个问题？什么是hooks。...还不明白react-hooks的伙伴可以看的另外一篇文章： react-hooks如何使用？...通过业务场景不同，我们到底需要react-hooks做什么，怎么样把一段逻辑封装起来，做到复用，这是自定义hooks产生的初衷。 如何设计一个自定义hooks，设计规范 逻辑+ 组件 ?...实战一：控制滚动条-吸顶效果，渐变效果-useScroll 背景：公司的一个h5项目，在滚动条滚动的过程中，需要控制 渐变 + 高度 + 吸顶效果。 1实现效果 ? 1 首先红色色块有吸顶效果。...页面 import React from 'react' import { View, Swiper, SwiperItem } from '@tarojs/components' import useScroll

    1.9K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券