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

如何在快速加载单元格后保持单元格中的滚动视图内容偏移

在快速加载单元格后保持单元格中的滚动视图内容偏移,可以通过以下步骤实现:

  1. 首先,确保你的单元格是可滚动的,可以使用CSS属性overflow: scrolloverflow: auto来实现。这将创建一个具有滚动条的容器,使内容超出容器大小时可以滚动。
  2. 在加载单元格的过程中,保存当前滚动位置。可以使用JavaScript来获取滚动位置,例如使用scrollTop属性获取垂直滚动位置,使用scrollLeft属性获取水平滚动位置。
  3. 加载完单元格后,将滚动位置恢复到之前保存的位置。可以使用JavaScript来设置滚动位置,例如使用scrollTop属性设置垂直滚动位置,使用scrollLeft属性设置水平滚动位置。

以下是一个示例代码,演示如何在加载单元格后保持滚动位置:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <style>
    .scrollable-container {
      width: 300px;
      height: 200px;
      overflow: scroll;
    }
  </style>
</head>
<body>
  <div class="scrollable-container" id="container">
    <div id="content">
      <!-- 加载单元格的内容 -->
    </div>
  </div>

  <script>
    // 保存滚动位置
    var container = document.getElementById('container');
    var savedScrollTop = container.scrollTop;
    var savedScrollLeft = container.scrollLeft;

    // 加载单元格的内容
    // ...

    // 恢复滚动位置
    container.scrollTop = savedScrollTop;
    container.scrollLeft = savedScrollLeft;
  </script>
</body>
</html>

这样,无论加载多少个单元格,都能够在加载完成后保持之前的滚动位置,确保用户能够继续查看之前的内容偏移。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

excel常用操作大全

如果您在原始证书编号添加19,请在B1单元格写入:=A1 '13 ',然后按回车键。 2.如何在文件下拉窗口底部设置最近运行文件名数量?...快速输入相同数量内容 选择单元格格区域,输入一个值,然后按Ctrl+ Ener在选定单元格格区域中一次输入相同值。 12、只记得函数名字,却记不起函数参数,怎么办?...13.如何将一个或多个选定格单元拖放到新位置?按住Shift键可以快速修改单元格内容顺序。...14.如何在屏幕上扩大工作空间? 从“视图”菜单,选择“全屏”命令。 15.如何使用快捷菜单?弹出菜单包括一些最常用命令,可以大大提高操作效率。...名字公式比单元格地址引用公式更容易记忆和阅读。例如,公式“=SUM”显然比使用单元格地址更简单、更直观,而且不容易出错。 27.如何在公式快速输入不连续单元格地址?

19.2K10

iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

如果需要的话,设计一种自定义方式让用户可以以非线性方式来获取内容。页面视图控制器让用户从一页移动到前一页或者一页,而并不支持用户在并不相邻页面间快速切换。...当用户在视图中拖拽内容内容随之滚动;当用户轻扫屏幕时,内容快速滚动——直到用户再次触摸屏幕或内容已经到达底部时停止。...Value 2布局,文本和副标题中间垂直间距会让用户专注于副标题第一 个单词。 ? 重要 以上四种单元格样式均支持添加表格视图元素,勾选或展开标志。...在点击,用户期望出现新视图,或者出现一个复选标记以表明先前点击项已经被选中或激活。 如果表格内容庞大而且复杂,不要在所有数据都加载完之后才一起显示出来。...可以首先展示文本信息,图片等较为复杂内容则在加载再显示。这样可以将有用信息立即传达给用户,同时也提高了应用响应能力。 在等待信息加载时候,可以考虑展示“过期”信息。

10.1K51
  • 最新iOS设计规范四|3大界面要素:视图(Views)

    八、滚动视图(Scroll Views) 滚动视图主要被用户用来去浏览那些像文档文本,集合图像等比显示区域要大内容。...过于狭窄列表可能导致文字没法连续,这样便会使用户很难阅读,并且难以在垂直方向像快速浏览。同样,过宽列表也一样可能难以阅读和扫描,并且可能占用内容空间。 快速显示列表内容。...如果列表数据需要一段时间才能加载出来,请显示进度条或旋转加载器(俗称小菊花),以向用户保证APP仍在运行。 保持内容新鲜性。可以考虑定期更新表格内容,及时展示新数据。但不要改变滚动位置。...系统提供这些标准单元格样式,很适合在各种常见场景中使用,但某些内容或某个APP有可能需要大量自定义单元格样式。 十一、文本视图(Text Views) 文本视图主要用以显示多行样式文本内容。...十二、网页视图(Web Views) 网页视图可以在APP中加载和显示丰富网页内容。例如:嵌入式HTML和网站;邮箱APP使用网页视图来在消息显示HTML内容。 ? 适当地使用前进和后退导航。

    8.5K31

    《iOS Human Interface Guidelines》——Table View表视图

    视图视图在一个由多行组成滚动单列清单显示数据。...API NOTE 查看Table View Programming Guide for iOS和UITableView来学习更多关于在你代码定义表视图内容。...查看UITableViewHeaderFooterView Class Reference来学习如何在代码中使用页眉页脚视图。...在点击之后,用户期待一个新视图出现(或者行显示一个勾选符号)来表示条目被选中了。 如果表内容是冗长或复杂,不要等到所有数据都获取之后再显示。...表应该在屏幕中间显示一个旋转活动指示器,伴随着信息文本(比如“加载...”)。这个行为可以使用户安心。 合适的话,给删除按钮使用一个自定义标题。

    2.4K20

    OEA WPF 树型表格虚拟化设计方案

    我们得先看看如何在 WPF 实现虚拟化。...表格虚拟化     由前面的内容可以看出,如果要在 WPF 实现一个行列都支持虚拟化 UIVPanel,只需要从 VirtualizingPanel 上继承下一个 UIVPanel 类型,并根据列宽度来计算并生成相应单元格就行了...图2 虚拟化可显示大量数据 TreeGrid     上图表格大量数据,只生成了少量可视元素,最终生成可视树结构如下: ?    ...图3 TreeGrid 虚拟化可视树元素     由于每一列单元格都是随着拖动横向滚动条而生成,所以在拖动时有一定延迟,没有原来感觉流畅。所以当列数较少时,则没有必要打开列虚拟化。...而在树型状态下,则主要是支持树节点加载,只实例化已经开展行,即只有展开树父行时,才会生成其对应子行。如下图所示: ?

    2.7K70

    优化Jupyter Notebook:提示,技巧,nbextension,Productivity tips

    Autopep8 -使用特定于内核代码重新格式化/美化代码单元格内容 5. Snippets - 添加一个下拉菜单,将片段单元格插入当前NoteBook。...计算完成(或失败)播放声音 将通知与您操作系统集成(为GNOME shell做好准备) 跳转到变量,函数或类定义 为rpy2启用自动完成(非常适合ggplot2) 在一个漂亮表格视图中汇总字典...但是%%R到目前为止,单元格自动完成不包括R对象(如果已加载,也不包括ggplot函数)。...如果反过来想要更多自动滚动,可以使用底层帮助函数来标记在晚上结束使用单元格,以便在早上快速打开NoteBook: from jupyter_helpers.utilities import scroll_to_current_cell...在bash,很容易实现使用tail -f。 观看输出需要以及放慢计算机速度问题,那么FollowingTail可以帮助您: 应用tail -f等效项以保持输出合理长度!

    4.9K20

    用FlexGrid做开发,轻松处理百万级表格数据

    介绍一款高效轻量数据处理工具 -- FlexGrid,这是一个轻量级快速灵活和可扩展控件,包含在全能控件套包 ComponentOne Studio Enterprise 。...除了基础功能,还提供更加灵活高级功能,包括行列冻结、单元格自定义、高级过滤、业务关系数据展示、子报表、汇总、数据树以及树形视图等。...核心优势: 快速加载滚动速度比竞争对手快10倍以上 灵活:可以获得丰富功能集,而不膨胀核心控件 灵活数据绑定 支持多种格式导入导出 灵活数据展示 详尽演示代码 体积小:程序集从113KB...二、强大交互体验 -- 行、列、单元格自如定制 FlexGrid 将诸多定制能力内嵌在产品,让您应用系统自如交互。...五、主题和样式全是设计风格 -- 便捷内容主题以及单元格级别的自定义样式 FlexGrid 内置了包括Office和Windows系统风格主题皮肤,对于熟悉Office配色方案最终用户更容易接受您应用系统

    2.4K80

    Excel 常用九十九个技巧 Office 自学教程快速掌握办公技巧

    5、快速调整显示比例光标任意点击表内单元格,按住 ctrl 键同时滚动鼠标滑轮,就可以快速放大或者缩小工作表显示比例。...6、怎样快速删除“0”值单元格行按组合键【Ctrl+F】导出查找对话框,选择【查找】选项卡,在输入栏输入:0,点击【全部查找】再按组合键【Ctrl+A】就会显示表格内容为 0 所有单元格,选中单元格右击...7、重复上一次输入在单元格输入内容按回车键进入下一个单元格,再按组合键【Ctrl+D】即可以快速重复上一次输入内容。...35、在合并保留所有单元格内容选取单元格区域,并把列宽拉到可以容下所有单元格合并宽度,点击菜单栏【开始】选项卡,选择【两端对齐】把多个单元格内容合并到一个单元格,在分隔空隔处按组合键【...48、快速冻结第一行及第一列选中表格内 B2 单元格,点击菜单栏视图】-【冻结至第 1 行 A 列】就完成了。

    7.1K21

    前端“油画设计师”——双缓存绘制与油画分层机制

    但是当我们当前展示内容在主题内容变化不大情况下,会有一些小部分内容变化,在页面刷新或者滚动时候,一帧中会有很多复杂内容元素图画运算,重新对页面元素绘制会导致CPU使用率飙升。...在该纯前端电子表格,整个绘制引擎根据油画绘制原理,分为主体图层和装饰图层,主题图层将会渲染持久,不会轻易改变元素,例如背景,单元格,表格线等。...而是根据表格内容特殊性,实现了根据视图层形状,从数据层组合出一层专属视图视图数据(ViewModel),再配合前文提到双缓存画布绘制机制,完成整个表格按需绘制需求,并缓存绘制结果,进一步提升绘制性能...在需要渲染时,只需要讲缓存画布内容克隆到主画布上,再附加上装饰图层元素 这样,当表格需要更新时候,比如单元格背景改变,只需要在克隆缓存画布重绘对应单元格内容即可。...而当表格向下滚动时,表格滚动结束,需要重绘,主画布会被清空,然后从缓存画布根据行为上下文进行画布偏移,将偏移图层直接绘制在主画布上,随后在主画布上绘制偏移剩余部分,最后更新缓存。

    1.3K20

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

    下图是腾讯文档智能表格 SmartSheet 看板视图无封面版本和有封面版本: SmartSheet 看板视图上线,10 w 单元格场景下 FPS只有 20 多帧,比起Sheet 视图 58...等滚动结束再设置回来,所以这里是 debounce 逻辑。...页面滚动时候,每次其实只移动了一小段距离,只有这部分是新增。那也就意味着前面大部分都是不变,只是增加了一些偏移量,如果能够对其进行复用,那肯定可以大大减少耗时。...但在快速滚动情况下,大部分时间都是没有出现新分组,大概率是在可视区内几个分组移动,所以这种情况下,如果使用整屏渲染,就不得不多去渲染一个分组。...很多地方不易被发现,深拷贝、序列化、反序列化等等。一些复杂又耗时计算可以将计算工作结果提前缓存起来,这样滚动时候就可以直接从缓存里面读取了。

    4.7K51

    使用R或者Python编程语言完成Excel基础操作

    输入数据:直接在单元格输入数据。 2. 删除数据 删除行或列:右键点击行号或列标,选择“删除”。 清除内容:选中单元格,按Delete键或右键选择“清除内容”。 3....格式化 设置单元格格式:右键点击单元格,选择“格式化单元格”,设置字体、颜色、边框等。 应用样式:使用“开始”选项卡“样式”快速应用预设单元格样式。 11....以下是一些其他操作: 数据分析工具 数据透视表:对大量数据进行快速汇总和分析。 数据透视图:将数据透视表数据以图表形式展示。 条件格式 数据条:根据单元格值显示条形图。...打印区域:设置哪些单元格或区域需要打印。 打印预览:查看打印效果并进行调整。 模板 使用模板:快速创建具有预定义格式和功能表格。...自定义视图 创建视图:保存当前视图设置,行高、列宽、排序状态等。 这些高级功能可以帮助用户进行更深入数据分析,实现更复杂数据处理需求,以及提高工作效率。

    21610

    问题——持续更新

    通过指针调用函数: 指针名 = &函数名 (这是给函数指针赋值)  拷贝、加括号、换名、加星号 __block关键字  在block要使用零时变量 block传值  反向传值 适配中分页控件和滚动视图相结合...  解决:一个是看偏移,一个是看当前页 2.获取当前屏幕大小CGRect frame = [UIScreen mainScreen].applicationFrame 解决横屏适配问题: 解决...:在程序怎么去实现 应用图标怎么添加 插件:  空工程 一些方法为什么总是调用不到,创建在视图控制器创建单元格???   ...解决:没有设置代理,方法无法调用 继承自UITableViewController视图控制器要想自定义单元格要删除系统分区代码。 非自定义单元格为什么无法设置黑夜模式??...在表格协议方法  return  2  和return  _apps.count 结果不同(表现在单元格高度上)???

    1.3K20

    精读《高性能表格》

    显然,常识是横轴只能纵向滚动,纵轴只能横向滚动单元格可以横纵向滚动,那么横向和纵向滚动条就只能出现在单元格区域: 这样会存在三个问题: 单元格使用原生滚动,横纵轴只能在单元格区域监听滚动,通过 ....快速滚动出现白屏,即便留了 Buffer 区域,在快速滚动时也无能为力,这是因为渲染速度跟不上滚动导致。...当我们把 Buffer 区域移除时,发现整个屏幕内渲染单元格在 1000 个以内时,现代浏览器甚至配合 Windows 都能快速完成滚动前刷新,并不会影响滚动流畅性。...预计算 像单元格合并、行列隐藏、单元格格式化等计算逻辑,最好在滚动前提前算掉,否则在快速滚动时实时计算必然会带来额外计算成本损耗。...宽度计算完毕快速刷新当前屏幕单元格宽度,但在宽度校准同时,维持可视区域内左对齐不变,如下图所示: 这样滚动过程虽然单元格会被突然撑开,但位置并不会产生相对移动,与提前全量撑开视觉内容相同,因此用户体验并不会有实际影响

    1.1K40

    Vs Code 2020年6月(1.47版)

    之前 选择并保持焦点在列表视图中 有一个新命令,list.selectAndPreserveFocus它使您可以从列表中选择一个项目,同时将焦点放在该列表。...)添加了两个新参数,以允许按键绑定配置新搜索编辑器行为: triggerSearch-打开搜索编辑器是否自动运行搜索。...没错 列表/树:动态水平滚动 workbench.list.horizontalScrolling现在可以在运行时切换以前存在设置,而不必强制您重新加载工作台。 ? 我开了,我觉得我电脑可以!...我们将视图选项(列表或树)和排序选项合并到上下文菜单新“ 视图和排序”菜单项。 ?...例如,在GitHub问题笔记本,您可以选择“ 锁定”按钮将单元格内容设置为只读,还可以通过常规“撤消/重做”命令撤消/重做此操作。

    4.5K30

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

    内容窗格中选择多个图层。 Ctrl+L 当布局为活动视图时,锁定或解锁在内容窗格中选择项目。 Ctrl+Shift+L 当布局为活动视图时,请在内容窗格锁定或解锁该级别上所有项目。...复制单元格中所选值。 Ctrl+V 粘贴所选内容。 将复制值粘贴到单元格。 F2 编辑单元格。 编辑当前单元格内容。 Esc 取消操作。 取消编辑值并将原始值恢复到单元格。...通过追踪创建 用于追踪线段构造工具键盘快捷键 键盘快捷键 操作 注释 O 查看选项。 打开选项对话框。 选项卡 设置负偏移。 转换偏移一侧并追踪边另一侧。...否则,将添加一个包含所选元素组。 Ctrl+U 取消分组。移除所选组全部元素。 Ctrl+Shift+G 选择组,自动布置组元素。 Ctrl + 右箭头 展开模型选定组。...Ctrl+V 将剪贴板内容粘贴到单元格单元格区域中。 F2 编辑单元格内容。 Enter 提交当前编辑。 Esc 取消单元格编辑并恢复原始值。

    1.1K20

    Excel表格35招必学秘技

    在“命令”标签,选中“类别”下“新菜单”项,再将“命令”下面的“新菜单”拖到菜单栏。   按“更改所选内容”按钮,在弹出菜单“命名”框输入一个名称(“常用文档”)。   ...2.执行“视图→视面管理器”命令,打开“视面管理器”对话框,单击“添加”按钮,弹出“添加视面”对话框,输入一个名称(“上报表”),单击“确定”按钮。   ...执行“视图→工具栏→监视窗口”命令,打开“监视窗口”(图7),单击其中“添加监视”按钮,展开“添加监视点”对话框(图8),用鼠标选中需要查看单元格,再单击“添加”按钮。...不过,我们可以先选择“工具”菜单加载宏”,然后在弹出窗口中勾选“欧元工具”选项,“确定”Excel 2002就会自行安装了。   ...点击Excel 2002“工具”菜单“选项”命令,然后在“常规”选项卡中选中“用智能鼠标缩放”复选框,点“确定”,我们再来看看现在鼠标滚轮都有些怎样功能:   在“智能鼠标”默认状态下,上下滚动鼠标滚轮

    7.5K80

    【译】W3C WAI-ARIA最佳实践 -- 布局

    如果焦点位于列顶部单元格上,则焦点不会移动。 Page Down: 以开发者设定行数移动焦点,一般滚动时,当前可见行集合最后一行会变为第一次滚动可见行一行。...Page Up: 移动焦点到开发者设定行数,一般滚动时,当前可见行集合第一行会变为滚动可见行一行。 Home: 将焦点移动到包含焦点所在行第一个单元格。...如果滚动元素列表会从一个大数据集中动态地加载更多元素,例如在购物类网站推荐产品连续列表,该模式尤其有用。如果像这样列表元素都在tab序列,键盘用户会被困在列表。...如果焦点位于网格第一个单元格上,则焦点不会移动。 Page Down (可选地): 以开发者设定行数向上移动焦点,一般情况下,当前可见行第一行会成为滚动可见行一行。...如果存在某些行或列在DOM中被隐藏或不存在情况,例如当滚动时自动加载数据,或者网格提供了隐藏行或列功能,使用以下属性,grid and table properties 所述。

    6.2K50

    Spread for Windows Forms高级主题(8)---通过暂停布局提高性能

    一种改善控件性能方法是,当需要对许多单元格进行变动时,可以先保持或挂起重画,直到所有的变动都完成时再进行。...通过在对单元格修改和重算时保持重画(挂起布局),然后再恢复布局并重画所有单元格控件能够节省很多时间,并且仍然能为用户展现一个全新界面。...布局对象 布局是一个对象,它保存了计算值(像单元格宽度和高度,合并,以及视图),用来绘制控件的当前状态。...这些值可能包括到底有多少视图,每一个视图左上方单元格是什么,每一行及每一列有多大以及每一个视图有多少单元格是当前可见,等等。...在下面的示例代码,我们在修改单元格代码附近代码块同时使用了这两个方法。在修改单元格颜色时,代码暂停了Spread控件重画,并在之后恢复了重画。

    1.7K60
    领券