首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一文彻底搞懂js中位置计算

,包括由于溢出导致视图中不可见内容。...scrollHeight 值等于该元素不使用滚动情况下为了适应口中所用内容所需最小高度。...Element.scrollWidth 这也是一个元素内容宽度只读属性,包含由于溢出导致视图中不可以见内容。 原理上和scrollHeight是同理,只不过这里是宽度而非高度。...当计算边界矩形时,会考虑口区域(或其他可滚动元素)内滚动操作,也就是说,当滚动位置发生了改变,top 和 left 属性值就会随之立即发生变化(因此,它们值是相对于,而不是绝对) 。...计算元素是否出现在口内 利用还是元素距离位置小于大小。 注意即便变成了负值,那么也表示元素曾经出现过屏幕中只是现在不显示了而已。

3.7K10

关于虚拟列表,看这一篇就够了

.虚拟列表 其核心思想就是处理用户滚动时,只改变列表可视区域渲染部分,然后使用padding或者translate来让渲染列表偏移到可视区域中,给用户平滑滚动感觉。...区域) 监听滚动事件根据滚动位置动态改变可视列表 监听滚动事件根据滚动位置动态改变空白填充 固定高度 列表高度固定的话,就无需每次都计算当前应该渲染多少条数据,数据量始终是固定,只需要通过用户滚动距离...并且需要注意是,不只是需要更新视图中列表项,还需要更新之后所有列表项 // 每次滚动,都去更新缓存数组中dom高度和位置   useEffect(     function () {      ...,使其展示容器口中 这里有两种方式,可以通过translate,也可以通过paddingTop paddingBottom来实现 // 使用translate来校正滚动条位置   // 也可以使用...,当然,所有的列表项数据还是都需要接口来进行请求,所以滚动时候,我们还需要加上监听滚动条位置并且从接口拉取数据逻辑,所以需要优化地方还很多。

3.4K31
您找到你想要的搜索结果了吗?
是的
没有找到

异步分片计算在腾讯文档实践

看板视图可以根据单选列作为分组依据,进行卡片一个聚合分组展示,而且卡片高度是不固定,只有当前列有内容才会展示出来。...画册视图虽然也是卡片,但没有分组,卡片高度始终固定,所以不会被排版计算问题困扰。 3. 为什么会慢?...表格里面的排版意思就是渲染之前根据行列来计算布局信息(宽高等等),在看板里面,每个分组高度都不一样,都是根据里面的卡片高度累加计算,所以计算每个卡片高度成为了重点。 为什么计算卡片高度会慢呢?...对于 1000 个卡片以上文档走异步分片计算,但可视区域内的卡片优先同步计算,这里会在上下左右多计算几个卡片,给用户滚动留一定缓冲。可视区域计算完成后立即渲染一次,保证用户能够快速看到页面。...更新和缓存 更新阶段,需要根据用户具体操作来做差量计算。比如用户点击了复选框,此时当前卡片高度没有发生变化,分组高度也没有变化,所以不需要重新排版,直接渲染就行了。

76530

【软件开发规范七】《Android UI设计规范》

卡片通常是通往更详细复杂信息入口。卡片有固定宽度和可变高度。最大高度限制于可适应平台上单一视图内容,但如果需要它可以临时扩展(例如,显示评论栏)。卡片不会翻转以展示其背后信息。 ​...以下情况考虑使用卡片: 同时展现多种不同内容 卡片内容之间不需要进行比较 包含了长度不确定内容,比如评论 包含丰富内容与操作项,比如赞、滚动条、评论 本该是列表,但文字超过3行 本该是网格,但需要展现更多文字...网格列表与应用于布局和其他可视视图中网格有着明显区别。 ​...列表由单一连续列构成,该列又等分成相同宽度称为行(rows)子部分。行是瓦片(tiles)容器。瓦片中存放内容,并且列表中可以改变高度。 如果列表项内容文字超过3行,请改用卡片。...编辑 ​编辑 列表较短不需要滚动时,设置和帮助反馈跟随列表后面。 ​

4.9K20

clientWidth,offsetWidth,scrollWidth你分清吗

+ 溢出内容尺寸,这个只针对dom子元素出现溢出情况时,才有效果,不然它始终和clientHeight相等 scrollTop 代表在有滚动条时,滚动条向下滚动距离也就是元素顶部被遮住部分高度...没有滚动条时scrollTop==0。...;  var Y = node.getBoundingClientRect().top+node.scrollTop; 一个demo加深印象 有一个列表,当我们输入文段编号,列表会将选中文段滚动视图中...大概是这样 实现思路就是,去拿到选中元素clientHeight和offsetTop,并和列表高度区间做比较,计算出元素是列表内部,还是溢出口,如果溢出了口,那么就回滚。...text-align: center;     font-size:22px;     color:#9ef64d;   } 核心方法 const { value } = this.state; // 滚动高度

1.9K10

Material Design —卡片(Cards)

左:不同内容与布局的卡片集合    右:不同布局与不同内容层次的卡片集合 ---- 行为 卡片具有恒定宽度和可变高度。最大高度限于平台上可用空间高度,但可以暂时扩大(例如,显示评论)。...卡片不会翻转以显示背面的信息。 支持手势 卡片手势应始终卡片集合中实施。 支持手势包括: 滑动手势(swipe gesture)可以每张卡片上使用。限制视图轻扫手势,使其不会彼此重叠。...超过最大卡片高度卡片内容会被省略,内部不会滚动,但可以扩展卡片。 一旦展开,卡片可能会超过视图最大高度。 在这种情况下,卡片将随卡片集合一起滚动。 ? ?...左:卡片可留有展开入口    右:手机端不要在卡片内放置可滚动区域,会存在两条很难分开滚动条 ?...pc端卡片可展开和内部滚动 卡片聚焦 当遍历卡片焦点时,移动到下一张卡片之前访问所有可聚焦元素。

4.3K100

css+js实现左右滑动卡片组件

最近一个活动页面需要做一个可以左右滑动抽签效果,故通过用csstransform属性和js结合来模拟可以无限滚动效果。...无限滚动原理 由于这里停止位置是固定,前排永远是当前卡片相对于口居中,后排永远是两个卡片相对于口居中,且每个卡片是一样,所以当卡片列表向前或向右移动到一个目标位置时,都将列表重置为初始位置继续滚动...如下图以前排卡片为例: 1544756683_12_w2480_h1496.png 所以当滚动停止后会统一将列表样式设置为transform: translateX(0)。...目标位移与帧位移 为了做出滑动后到停留位置缓动效果,所以当用户左右滑动屏幕时,会记录滑动距离,计算出卡片该到目标位移位置,目标位移位置是有规则,因为这里有10张卡片均分宽度,位置必须是(100%/...使用css transform来做无限滚动效果,可以避免改变dom结点带来页面重新布局。 下图是chrome cpu6倍减速调试效果,没有触发layout,FPS基本维持60左右。

30.1K102

卡片式UI不再流行,列表式UI将是王牌

我们第一次接触卡片问题是 Goal News 发布之后 - 见图。屏幕上可以看见少量抱怨文章。例如: ? 用户关于卡片得反馈截图 太多图片而且需要不停地滚动。我只是想快速浏览新闻。...卡片式增加了滚动深度 Goal(最右边)上使用卡片鼓励用户向下滚动页面。这不是常见,因为每个卡片相比于 Voetbalzone(最左边)占用高出38%高度。...虽然用户滚动更多,他们仍然看到较少内容,比较左侧网站少了3篇文章。 可阅读文章数 很明显,列表好处是你可以视图中放更多新闻文章,从而更快地扫描标题。...一是折叠,二是向下滚动到“最好”位置 - 最可能是新闻标题地方。...屏蔽广告,因为广告横幅高度可能有所不同 首先让我们来看看折叠效果: ? 折叠效果。 顶行是卡片式网站。 底部是列表式网站。 下面是“最好”案例 - 你可以看到最多新闻。 ?

3.1K70

初探富文本之基于虚拟滚动大型文档性能优化方案

具体来说,虚拟滚动只渲染用户浏览器口部分文档数据,而不是整个文档结构,其核心实现根据可见区域高度和容器滚动位置计算出需要渲染列表项,同时不渲染额外视图内容。...,但是为了用户滚动时尽量避免出现短暂白屏现象,由此提前加载部分视图内容,通常这部分值可以取得高度一半大小;接下来是viewport部分,这部分是真实在口区域要渲染内容;而在口区域下我们同样需要...虚拟滚动实现方式本质上就是在用户滚动视图时,根据高度滚动容器滚动距离、行高度等信息计算出当前口内需要渲染行,然后视图层根据计算状态来决定是否要渲染。...首先我们来看Scroll Event,这是最常见滚动监听方式,通过监听滚动事件我们可以获取到滚动容器滚动距离,然后通过计算高度滚动距离来计算出当前口内需要渲染行,然后视图层根据计算状态来决定是否要渲染...,很明显Resize时候由于会导致容器宽度变化,因此文本块高度也会跟随发生变化,因此我们口锁定还需要在此处进行调整。

12810

10w单元格滚动卡顿如何解决?腾讯文档7个秘笈

导语 |腾讯文档 SmartSheet 视图是多种视图中一种,该模式下 FPS 仅 20 几帧(普通 Sheet 视图下 58 帧),用户体验非常卡顿。...卡片高度是不固定,只有当前列有内容才会展示出来。...所以腾讯文档团队优化重点目标是:尽量将每一帧耗时降低到 16.67 ms。 02 增量渲染 Smart Sheet 看板是多种视图中一种。它主要是多个分组来组成,每个分组又包括了多个卡片。...看板滚动主要有两种情况: 第一种,没有出现新分组和卡片,当前只是可视区域的卡片滚动; 第二种,出现了新分组和卡片,涉及到了节点销毁和新增。...另外,最开始计算时候,只是为了算出文本高度,绘制阶段最多只展示 4 行,超过 4 行就需要添加省略号,所以算出高度后还要判断是否超过了 4 行。

4.5K51

Vcl控件详解_c++控件

Columns:对列进行操作 DropTarget:可列表视图中项目是否以拖放操作目标显示 FlatScrollBars:是否让滚动条有平滑效果 FullDrag:当标签拖动时,是否重新绘制...当ViewStyle为vsIcon或vsSmallIcon时,使用该属性定义划分列表视图中客户区域分隔工作区域。...:可在列表视图有焦点时获得用户输入字符序列,列表视图添加字符串到查找字符串,并查找匹配项 IsEditing:判断当前用户是否正在对项目进行操作 Scroll:可通过水平像素和垂直像素滚动列表视图内容...该事件只有OwnerData属性为True时才有效 OnDataHint:当列表视图内容变化(如用户滚动列表视图)时发生 OnDataStateChange:当项目的范围改变状态时发生。...OnInsert:列表视图中插入一新项目发生 OnSelectItem:当选中项目时触发 THeaderControl 属性 Canvas:只读,用来访问画布 DragReorder

4.8K10

CSS 中 关于 Overflow ,你需要了解这些知识点!

通过设置高度,我意思是项目应该有内容(不是空),也不是添加一个显式高度。...但是,可以使用 Javascript 滚动内容。 Scroll ? 在上图中,无论内容是否长,滚动条总是可见。注意,这取决于操作系统。...Auto auto这是一个聪明关键字,仅当内容比其容器长时才显示滚动条。 ? 注意,图中,只有当内容比其容器长时,滚动条才可见。...用例和事例 简单滑块 我们可以通过水平裁剪内容并使其滚动来创建快速简单滑块。 ? 在上面的模型中,我们有水平放置的卡片,还有一个滚动条,可以滚动并显示更多内容。...(准确地说,应用此特性元素呈现为内联对象,周围元素保持同一行,但可以设置宽度和高度地块元素属性) 当一个inline-block元素overflow值不是visible时,这将导致该元素底边根据其同级元素文本基线对齐

3.8K20

js获取各种距离和宽高

window window.screen.height 返回屏幕高度 window.screen.width 返回屏幕宽度 window.innerHeight/window.innerwidth...返回窗口内部高度/宽度(不包含工具栏和滚动条) window.pageXOffset/window.pageYOffset 文档在窗口左上角水平和垂直方向滚动像素 window.pageYOffset...-浏览器窗口可见区域 页面高度 document.documentElement.scrollHeight-浏览器窗口整个页面高度 滚动高度 document.documentElement.scrollTop...以浏览器窗口(口)左上角为原点, 距离口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口(口)左上角为原点, 距离口左侧距离, 不随页面滚动而改变 pageX 以整个页面的左上角为原点.../scrollWidth 这个只读属性是一个元素内容高度度量,包括由于溢出导致视图中不可见内容。

19910

大家都能看得懂源码之ahooks useInfiniteScroll

const scrollTop = getScrollTop(el); // Element.scrollHeight 这个只读属性是一个元素内容高度度量,包括由于溢出导致视图中不可见内容。...一个元素 scrollTop 值是这个元素内容顶部(卷起来)到它口可见内容(顶部)距离度量。当一个元素内容没有产生垂直方向滚动条,那么它 scrollTop 值为 0。...一个元素 scrollTop 值是这个元素内容顶部(卷起来)到它口可见内容(顶部)距离度量。当一个元素内容没有产生垂直方向滚动条,那么它 scrollTop 值为 0。...clientHeight[7] 这个属性是只读属性,对于没有定义 CSS 或者内联布局盒子元素为 0,否则,它是元素内部高度 (单位像素),包含内边距,但不包括水平滚动条、边框和外边距。...clientHeight 可以通过 CSS height + CSS padding - 水平滚动高度 (如果存在) 来计算。

65530

vue 虚拟列表实现

缓存池是另一个关键技术,它可以视图滚动时重用已经渲染列表项,而不是重新渲染它们。这可以大大减少DOM 操作数量,从而提高应用程序响应速度和性能。...这可以使用 window 对象 innerHeight 或 innerWidth 属性来完成。 计算当前视图中需要渲染列表项。这可以根据当前滚动位置和列表高度或宽度来计算。...当用户滚动时,列表会动态地更新,以显示当前可见区域列表项。实现中,我们使用了一个计算属性 visibleItems 来计算当前视图中需要渲染列表项,并使用 v-for 指令来动态地渲染它们。...我们还使用一个监听滚动事件方法 onScroll 来更新可见区域起始索引,从而更新视图中显示列表项。 总之,Vue 虚拟列表是一种优化大型列表渲染性能技术。... Vue 中实现虚拟列表通常需要遵循一些步骤,如计算列表高度或宽度、计算屏幕可见区域高度或宽度、计算当前视图中需要渲染列表项、维护一个缓存池以及动态地添加和删除DOM元素。

15610

仅使用CSS就可以提高页面渲染速度4个技巧

Content-visibility 一般来说,大多数Web应用都有复杂UI元素,它扩展范围超出了用户浏览器视图中看到内容。...让我们考虑一下下面的页面,其中包含许多不同信息的卡片。虽然大约有12张卡适合屏幕,但列表中大约有375张卡。正如你所看到,浏览器用了1037ms来渲染这个页面。...与滚动条行为有关问题。 由于元素初始渲染高度为0px,每当你向下滚动时,这些元素就会进入屏幕。实际内容会被渲染,元素高度也会相应更新。这将使滚动行为以一种非预期方式进行。...为了解决滚动问题,你可以使用另一个叫做 contain-intrinsic-size CSS 属性。它指定了一个元素自然大小,因此,元素将以给定高度而不是0px呈现。...5 什么时候不是用will-change 虽然 will-change 目的是为了提高性能,但如果你滥用它,它也会降低Web应用性能。 使用 will-change 表示该元素未来会发生变化

74910

面试官问:如何判断一个元素是否可视区域?

面试官问:如何判断一个元素是否可视区域? 最近在参加面试找工作,陆陆续续面了两三家。其中一个面试官问到了一个问题:如何判断一个元素是否可视区域?...通过元素位置信息和滚动滚动高度 在这里,我们先介绍几个元素位置信息和大小: Element.clientWidth Element.clientWidth 属性表示元素内部高度,以像素计。...❞ window.innerHeight window.innerHeight 属性表示浏览器窗口口(viewport)高度(以像素为单位);如果有水平滚动条,也包括滚动高度。...() 方法返回值,如果没有根元素(即直接相对于滚动),则返回 null boundingClientRect:目标元素矩形区域信息 intersectionRect:目标元素与口(或根元素)...「列表无限滚动」 无限滚动时,最好在页面底部有一个页尾栏。一旦页尾栏可见,就表示用户到达了页面底部,从而加载新条目放在页尾栏前面。

2.7K21

提高效率 |ArcGIS Pro 中所有快捷键一网打尽

注: 这是 ArcGIS Pro 中可用键盘快捷键完整列表,并且每个软件版本中都会更新。...右箭头键或左箭头键 功能区或窗格中从一个选项卡移至另一选项卡。 Tab 键或 Shift+Tab 功能区、窗格、视图或对话框上命令或项目之间移动。 上箭头键或下箭头键 列表元素之间移动。... 2D 中,视图将沿所指示方向平移。指针距离视图中心越远,平移速度越快。 3D 中,当视图沿指针所指示远离视图中方向平移时,将保留照相机方位角和高度角。...按住 V 键同时单击并拖动,以围绕您单击枢轴点旋转。V + 方向键围绕视图中心旋转。按 V 并按上箭头键、下箭头键、左箭头键或右箭头键来围绕视图中心旋转。B + 拖动 3D 场景中环视。... 2D 中,视图将沿所指示方向平移。指针距离视图中心越远,平移速度越快。 3D 中,当视图沿指针所指示远离视图中方向平移时,将保留照相机方位角和高度角。Shift+Q降低漫游速度。

74120

如何只使用CSS提升页面渲染速度

Content-visibility 一般来说,大部分 Web 应用都有复杂 UI 元素,并且它扩展超出了用户浏览器视图中所能看到范围。...content-visibility接受几个值,我们可以一个元素上使用content-visibility: auto;来立即获得性能提升。 我们可以看下面这个页面,包含很多显示不同信息的卡片。...虽然屏幕能显示大约 12 个卡片,但列表中有差不多 375 个卡片。如你所见,浏览器花费 1037ms 来渲染这个页面。...与滚动条行为相关问题。由于元素最初渲染高度是 0px,当你向下滚动时,这些元素会进入屏幕。实际内容会被渲染,这个元素高度会被相应地更新。这会使滚动条出现预料之外行为。...因此,这个元素会用指定高度渲染,而不是 0px。

1.5K20
领券