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

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

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。...scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。...getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。...theadHeight = thead.offsetHeight; 你可能注意到了这里我们使用 let 定义变量，之所以用 let ，我们改变窗口的大小，这些相关的值也会发生变化，需要进行动态更新。...小节 到此，我们一起完成了这个案例，通过本案例，我们学会了如何使用原生的方式动态实现固定元素，并在一定的时机取消固定。

3.2K31

使用 Node.js 定制你的技术雷达：中篇

探索坐标体系找出关联 通过查找资料了解到 SVG 中使用 transform 坐标系，使用的坐标变换方式是线性变换。...924 可以看到元素在 SVG 图中定位使用的属性坐标和我们全局捕捉鼠标使用的坐标数值有较大的差异，为了进一步判断，我们需要做一些额外的计算辅助推理：试着使用 SVG 元素的全局坐标和其相对元素偏移相减...逆向分析查找定位坐标算法 使用节点的属性作为关键词，我们定位到 /js/k8s_production/radar/quadrant.js 这个用于生成 SVG图的脚本程序。...逆向分析极坐标和直角坐标转换 继续回顾之前的坐标点元素创建函数，观察传递参数并查找实际的调用位置。...不过再次观察 坐标点元素创建函数，发现第一个数值是 DOM 容器节点，所以可以忽略掉这个元素，只分析 w, l两个元素是什么来头就够了。 基于变量需要先声明后使用的特点，我们向上翻动，查找这两个变量。

1.6K00
您找到你想要的搜索结果了吗？
是的
没有找到

使用 Node.js 定制你的技术雷达：中篇

探索坐标体系找出关联 通过查找资料了解到 SVG 中使用 transform 坐标系，使用的坐标变换方式是线性变换。...924 可以看到元素在 SVG 图中定位使用的属性坐标和我们全局捕捉鼠标使用的坐标数值有较大的差异，为了进一步判断，我们需要做一些额外的计算辅助推理：试着使用 SVG 元素的全局坐标和其相对元素偏移相减...逆向分析查找定位坐标算法 使用节点的属性作为关键词，我们定位到 /js/k8s_production/radar/quadrant.js 这个用于生成 SVG图的脚本程序。...逆向分析极坐标和直角坐标转换 继续回顾之前的坐标点元素创建函数，观察传递参数并查找实际的调用位置。...不过再次观察 坐标点元素创建函数，发现第一个数值是 DOM 容器节点，所以可以忽略掉这个元素，只分析 w, l两个元素是什么来头就够了。 基于变量需要先声明后使用的特点，我们向上翻动，查找这两个变量。

1.9K20

一个骚气的文章目录自动生成器了解一下

这个插件根据选定的目录内容中的 h1, h2, h3, h4, h5, h6 标签来自动生成目录插入到选定的目录容器中，并且提供一个漂亮的样式效果 监听内容区滚动 点击跳转功能 兼容性：IE10+ (由于使用了...实现思路 滚动的监听通过 getBoundingClientRect 获取元素大小以及相对视口的位置，判断我们的监听对象 h1~h6 标签是否在视口中，如果在则添加 linkActiveClass 类...左边的边栏线则是使用 svg 的path来画出来的，根据层级相应做一些调整，辅以css的 transition 的效果就可以呈现出不错的移动效果。 3....Api 如果要使用默认的样式，请手动引入 import 'progress-catalog/src/progress-catalog.css' 使用方法： // 引入 import Catalog from...的父元素 linkClass [可选, String] 所有目录项都有的类，默认值：cl-link 注意，如果设置了此值，则需要重写默认样式 linkActiveClass [可选, String]

1.1K20

触发浏览器回流的属性方法一览表

元素类 元素测量 elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent elem.clientLeft..., elem.clientTop, elem.clientWidth, elem.clientHeight elem.getClientRects(), elem.getBoundingClientRect...mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY document doc.scrollingElement 仅会导致样式重新计算...Range: range.getClientRects(), range.getBoundingClientRect() SVG 可以参见 Tony Gentilcore’s 2011 Layout...它们所消耗的性能取决于当时的内容或者情况，但通常来说两者所消耗的性能都是相似的； 一些简单的解决办法： 避免在 for 循环中强制布局以及更改DOM 使用开发工具分析产生影响的代码 批量读写DOM（使用

1.5K30

精读《web reflow》

GetDocument().UpdateStyleAndLayoutTreeForNode(this) 即在聚焦元素时，虽然没有拿元素位置信息的诉求，但指不定要被聚焦的元素被隐藏或者移除了，此时必须调用...document 相关 document.scrollingElement 仅重绘 document.elementFromPoint elementFromPoint 因为要拿到精确位置的元素，必须重排...Range 相关 range.getClientRects(), range.getBoundingClientRect() 获取选中区域的大小，必须 reflow 才能保障精确性。...SVG 大量 SVG 方法会引发重排，就不一一枚举了，总之使用 SVG 操作时也要像操作 dom 一样谨慎。...我们需要学习访问哪些属性或方法会导致回流，能不使用就不要用，尽量做到读写分离。在定义要频繁触发回流的元素时，尽量使其脱离文档流，减少回流产生的影响。

62710

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

在一些特殊的场景里，我们需要跳出数据驱动 UI 的解题思路，例如为了避免出现性能瓶颈，在高频率的事件监听中，我们会选择直接使用原生 DOM 节点来解决问题 意思就是说，如果你想要跳出 React 的环境使用其他的方式开发...在一个复杂的项目中，我们可以使用 React 解决一部分逻辑，然后使用别的更合适的方案解决另外的问题，这样的灵活性提高了 React 项目的上限。...Figma 1 如何运用 useEffect 第二个参数为一个数组，当我们传入的参数为一个空数组时，表示 effect 仅会在组件首次渲染完成时执行。...对于原生 DOM 而言，我们可以使用 getBoundingClientRect 来获取元素对象在可视区域中的位置信息 本案例中的判断规则非常简单粗暴，因此当同屏出现两个目标元素时会存在规则冲突，实践中的规则设计会更细致一些...`${s.item} ${s.active}` : s.item}>案例一 这样，我们只需要在滚动过程中，不停的判断每个目标元素和视口的相对位置，当符合条件的目标元素出现在视口时，就设置

12310

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

---- 今天的主要内容包括： 使用元素位置判断元素是否在当前视区 使用 Intersection Observer 判断元素是否在当前视区 实例：懒加载 实例：无限滚动 实用 npm 包推荐 正文...使用元素位置判断元素是否在当前视区 这种方法实现起来比较简单， 我们一步一步来。 首先：编写一个 util 函数 isVisible，它将仅接收一个参数，即 element。...export const isVisible = (el) => { }; 使用 getBoundingClientRect 获取该元素的位置 const rect = el.getBoundingClientRect...使用 Intersection Observer 判断元素是否在当前视区 Intersection Observer 是一种更高效的方式。 为什么这么说呢？...// 如果显式指定了跟元素，该值可以使用百分比，即根元素大小的百分之多少。 // 如果没指定根元素，使用百分比会出错。

1.4K20

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

实现方案： 1、默认不加载图片，只加载占位符2、组件滚动条变化3、计算可视区域，触发条件4、标签src属性加载资源 知识点： scrollTop：外框元素的滚动高度offsetTop：元素相对于最近的包含该元素的定位元素...如果没有定位的元素，则默认body。offsetHeight：它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。...这里应该是有一些可以优化的地方，比如1、可以只监听向下滚动时候的事件，并设置延时（使用截流函数），防制多次调用回调函数。...2、可以设一个标识符标识已经加载图片的index，当滚动条滚动时就不需要遍历所有的图片，只需要遍历未加载的图片即可。3、可以在计算的时候，增加偏移数据，提前加载图片，并使用淡入效果，提高流畅性。...当数据达到一定量的时候，事件绑定和循环位置计算会消耗大量的性能，每次调用 getBoundingClientRect() 都会强制浏览器 重新计算整个页面的布局 ，可能给你的网站造成相当大的闪烁。

94930

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

Element.getBoundingClientRect() getBoundingClientRect() 方法返回元素的top, right, bottom 和 left是相对视口的位置。...// 用法 let demo = document.getElementById('demo'); demo.getBoundingClientRect() 你还可以通过这个方法获取元素其左上角顶点相对可视窗口的坐标...document.getElementById('demoP'); demo.remove(pEl); 3. querySelector() / querySelectorAll() querySelector 方法是对指定的筛选器进行过滤查找元素...let demoPs = demo.querySelectorAll("p"); // 返回满足条件的 nodeList，这里是全部的 p 元素 4. scroll() scroll 滚动事件，表示元素滚动到页面特定的坐标...5. mousedown() / mousemove() / mouseup() 在 pc 端的开发中，我们监听用户的事件最后的三个方法，在 Angular 中自定义 Video 操作文章中我们已经使用过

65920

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

实现方案： 1、默认不加载图片，只加载占位符 2、组件滚动条变化 3、计算可视区域，触发条件 4、标签src属性加载资源 知识点： scrollTop：外框元素的滚动高度 offsetTop：元素相对于最近的包含该元素的定位元素...如果没有定位的元素，则默认body。 offsetHeight：它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。...这里应该是有一些可以优化的地方，比如 1、可以只监听向下滚动时候的事件，并设置延时（使用截流函数），防制多次调用回调函数。...2、可以设一个标识符标识已经加载图片的index，当滚动条滚动时就不需要遍历所有的图片，只需要遍历未加载的图片即可。 3、可以在计算的时候，增加偏移数据，提前加载图片，并使用淡入效果，提高流畅性。...当数据达到一定量的时候，事件绑定和循环位置计算会消耗大量的性能，每次调用 getBoundingClientRect() 都会强制浏览器 重新计算整个页面的布局 ，可能给你的网站造成相当大的闪烁。

92010

单页应用优化--懒加载

配合webpack代码分割使用，达到按需加载的效果（下述只简单陈述，不做详细讲解）。 补充，webpack有三种常用的代码分割方式： 入口起点：使用 entry 配置手动地分离代码。...对于这些文件，请使用 output.chunkFilename选项来控制输出。通过 loader 创建的文件也不受影响。在这种情况下，你必须尝试 loader 特定的可用选项。...== '') return rect = item.getBoundingClientRect() // 图片一进入可视区，动态加载 if (rect.bottom...该方式通过监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口信息，再判断是否在视口之内。...： time：可见性发生变化的时间，毫秒； target：被观察的目标元素，DOM节点对象； rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值

1.6K31

图片懒加载

2.2 第二种: 通过js在指定时机设置 img 的 src 属性值实现步骤:拿到所有图片的dom元素遍历这个含有图片的元素列表是否到达了可视区的范围内如果到了, 旧将该元素的src 属性进行设置监听浏览器的滚动...= window.innerHeight （2）获取元素距离浏览器窗口顶部的高度获取元素距离可视区域顶部的高度需要通过getBoundingClientRect() API 来实现，getBoundingClientRect...("your-element-id");  const distanceToTop = element.getBoundingClientRect().top;判断元素是否处于可视区的逻辑从上面这张图里面...,我们就会得知:判断图片是否处于可视区, 就可以根据该元素相对浏览器的top 和 浏览器可视区域的高 做相减如果值为负数, 说明该元素处在浏览器的可视区域内如果值为正数, 说明该元素于浏览器的可视区域的外面代码实现因此我们就可以编写我们的代码了...observer 参数是一个指向创建该 IntersectionObserver 实例的对象的引用。这个参数允许你在回调函数中调用 unobserve 方法，以停止观察某个特定的目标元素。

11400

VLOOKUP很难理解？或许你就差这一个神器

数组形式 INDEX(array, row_num, [column_num]) 返回由行号和列号索引选中的表或数组中元素的值。 当函数 INDEX 的第一个参数为数组常量时，使用数组形式。...如果引用的每个区域仅包含一行或一列，则row_num或column_num参数是可选的。例如，对于单行的引用，可以使用函数 INDEX(reference, column_num)。...引用area_num选择特定区域后，row_num 和 column_num 选择特定单元格：row_num=1 是区域的第一行，column_num=1 是第一列，以此类比。...=INDEX(C14:C19,7-C8) 从C13:I13区域中的数组--名称，按照F7的数值，查找出目标名称得到需要的列数据。 =INDEX(C13:I13,F7) ?...【开始】--【条件格式】--【新建规则】--选择【使用公式确定要使用格式的单元格】，并在【为符合此公式的值设置格式】中填写公式。 下面演示突出显示D13:I13区域内的格式为例。

8K60

Web思维导图实现的技术点分析（附完整源码）

技术选型 这种图形类的绘制一般有两种选择：svg和canvas，因为思维导图主要是节点与线的连接，使用与html比较接近的svg比较容易操作，svg的类库在试用了svgjs和snap后，有些需求在snap...快捷键 快捷键简单来说就是监听到按下了特定的按键后执行特定的操作，实现上其实也是一种发布订阅模式，先注册快捷键，然后监听到了该按键就执行对应的方法。...g元素来包裹的，相关变换效果也是应用在这个元素上，我们的思路是先去除它的放大缩小效果，这样能获取到它原本的宽高，然后把画布也就是svg元素调整成这个宽高，然后再想办法把g元素移动到svg的位置上和它重合..., 1 / origTransform.scaleY) 4.把svg画布调整为g元素的实际大小 // rbox是svgjs提供的用来获取变换后的位置和尺寸信息，其实是getBoundingClientRect...5.把g元素移动到svg左上角 const rect = this.mindMap.draw.rbox() const elRect = this.mindMap.el.getBoundingClientRect

2.9K61

web图像的常见应用策略与技巧

sizes属性有两个值：第一个是媒体条件；第二个是源图尺寸值，在特定媒体条件下，此值决定了图片的宽度。...适用场景为：在一个精确特定的转效点（breakpoint）需要显示一个特定的图像时。使用picture元素选择图像，不会有歧义，理解起来也更直观。...我的导师 wenju 之前发过这个计算公式相关的文章： 百分比值（）是背景图相对于背景定位区（background positioning area）的百分比，可以控制在容器元素内仅显示Sprites图的部分内容...比如下图中，Sprites图是由四张图像拼成的，要想在容器内仅显示第一张图像，background-size的值应该多少呢？ ?...source type="image/svg+xml" srcset="svg.svg">     在支持的浏览器里使用SVG，在不支持的浏览器里显示

1.5K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券