逐字渲染的挑战最近在开发AI聊天助手的时候，遇到了一个很有趣的滚动问题。我们需要开发一个类似微信聊天框的交互体验：每当聊天框中展示新消息时，需要将聊天框滚动到底部，展示最新消息。...如果在 web 什么也不做，聊天体验可能是这样的，需要用户手动滚动到最新消息：试想一下如何在 web 中实现微信的效果。每当聊天框中接收到新消息时，都需要调用滚动方法滚动到消息底部。...如果仍使用 scrollIntoView 来滚动到底部，就需要监听消息体的变化，每次消息更新时都要通过 JavaScript 调用一次滚动方法，会造成一些问题：频繁的 JavaScript 滚动调用。...于是联想到了 Excel 表格，当我们在表格中第一行插入一行，这一行后边的内容会被很自然的挤下去。并不需要做什么滚动，这一行就会出现在最顶部的位置。...不需要对聊天框和消息体再进行旋转操作，也不需要反转滚动条的行为。以上两种方法都存在一个相同的问题，当一开始聊天消息还很少时，聊天消息也会紧贴着底部，顶部会留出一片空白。
【本节目标】首页结构布局 一个页面，是由很多小部分组成的，比如左侧，顶部，右侧，底部这种不同的区域。...首先，我们先把这个空白的骨架dom层代码写到我们的ToolList.vue中。...然后是style样式，这个不写不好看： 效果如下： 接下来，我们把工具列表的内容 移动到这个Main的地方： 效果如下： 大家可以发现，现在的排列，明显不好看。间距过大。...那么我们接下来就是使用 表格 来承载这些数据就好看了，表格这个组件呢，在elementUI中是这样写的：el-table 而这个表格标签，只需要指定data属性为我们创建的那个列表即可： 里面的每一列的元素标签是...效果如下： 现在大家发现，这些工具只有个名字和创建时间，显然不够。 比如用户要点击进入某个工具的详情页，要怎么办呢？ 当然是再增加一列，放进入按钮， 删除按钮，编辑按钮 等等了。。。
=> 移动到该行左边该字符后 - => 移动到前一行第一个非空白字符 + => 移动到下一行第一个非空白字符 数字+G => 移动到第n行第一个非空白字符 数字+gg => 移动到第n行第一个非空白字符...） w => 移动到下一个单词词首 e => 移动到下一个单词词尾 b => 移动到上一个单词词首 ge => 移动到上一个单词词尾 W => 移动到下一个空白格开的字串首 E => 移动到下一个空白格开的字串尾...B => 移动到上一个空白格开的字串首 gE => 移动到上一个空白隔开的字串尾 ( => 移动到下一句首 ) => 移动到上一句首 } => 移动到下一段落 { => 移动到上一段落 [[ =>...屏幕滚动 Ctrl+u => 上滚1/2页 Ctrl+d => 下滚1/2页 Ctrl+f => 上滚1页 Ctrl+b => 下滚1页 zz => 置当前行于当前屏幕正中 zt => 置当前行于当前屏幕顶部...zb => 置当前行于当前屏幕底部 3.
3部分 1、什么是滚动穿透 2、为什么会滚动穿透 3、怎么解决滚动穿透 4、碰到的问题 什么是滚动穿透 大家肯定不陌生了，做移动端开发的，肯定都碰到过，比如 我明明滚动的是弹窗，但是底下的 document.../#scrolling 以下是个人的理解 当用户开始滚动的时候，页面响应滚动有两种类型 1、document 滚动 2、可滚动 element 滚动 只有两种类型，就是说，一旦有滚动行为发生，那么就必然产生这两个类型其中之一...，当元素滚动到顶部和底部的时候，再滚动，仍然会触发document 滚动 为什么呢？...之前我们说了，浏览器需要尽可能响应滚动行为，element 滚到两端 element 滚不了，那我就滚 document 所以我们最好监听 element 滚到 顶部和 底部的时机，继续禁止滚动行为 var...） 但是document 还是不会滚动的 3滚动穿透的触发条件 一次没有抬起的滚动行为（手没有离开屏幕）导致元素滚动到顶部或者 底部之后，如果手还在屏幕上往两端滑，并不会触发滚动穿透 如果你把元素滚动到
对当前单元格重复上一操作excel快速求一列的平均值，不要空值=AVERAGEIF(A2:A8,"""")但其实平均值函数=AVERAGE()本身就是忽略空值的。...怎么将Excel表格的空格替换成换行显示word空白页问题在表格后的空白页，按del无法删除。...（连续），然后选择要调整的部分，按照上面的方法重新分为一栏。...，保存后重新打开仍然是未调整前的样子三线表格式设置如下换为标题行当出现设置后表格格式还是有问题时，建议检查下图中的标注位置是否框选，尝试框选解决问题注：有时三线表最底部可能看着很细，但经过检查，格式没有问题...将光标移动到两个分节符之间的任意位置，然后再次点击“布局”选项卡，在“页面设置”组中找到“栏”选项，然后选择“单栏”。这样就将下一页设置为单栏排版了。
大神做法： 首先选中一列数据，光标移动到左下角，当光标变为“十”时，按【Shift】+鼠标左键（此时光标会变化），向下拖拽即可。拖拽2行，就是插入2行空行！ ?...-04- 数据快速插入到所需的列 小白做法： 插入空白列——复制“产品名”列数据——删去旧的“产品名”数据。 ?...-08- 快速复制上一行的内容 小白做法： 【Ctrl】 +【C】然后 【Ctrl】 +【V】，这个深入人心的快捷键组合似乎也没有那么好用…… 大神做法： 鼠标放在空白单元格，直接按【Ctrl】+【D...大神做法： 复制粘贴表格后，点击表格右下角，选择保留源列宽，发现表格跟原始一模一样啦，简单，快捷，高效！ ? -10- 设置数字的位数 小白做法： 利用单引号 ' 来进行输入三位数。...可以发现，无论输入的是1位数还是2位数，都会自动补齐到3位数！ ? 橙c提醒熟练掌握Excel在职场绝对是给你加分的哦，别人花上几分钟完成的事情，在你手上只有几秒钟，说不定就给你升职加薪啦~ ?
分类 按照我的个人理解，滚动分全局滚动(浏览器窗口)跟局部滚动(自定义的盒子)，以下内容绝大部分都是指全局滚动，局部滚动的话获取指定的DOM再调用相应的API即可✅ 如何设置全局滚动条高度 1....滚动到底部 window.scrollTo({ left: 0, top: document.scrollingElement.scrollHeight }); // 如果你实在是懒的话......window.scrollTo(0, 999999); 注意：平滑滚动到顶部或者底部自己加参数或者属性即可✅ 3....判断浏览器已滚动到底部 window.addEventListener("scroll", () => { let { scrollTop, scrollHeight, clientHeight...函数节流 当你没加函数节流： window.addEventListener("scroll", () => console.log("我在滚我在滚！"))
2探索一下原因 正如我上面说，只有在定位元素的输入框被激活时，页面仍有很多内容，仍能往上滚的时候，才出现光标错位的问题 那么 首先，观察一哈这个光标错位时的位置 好像是键盘没有唤起时，定位元素输入框的位置啊...4为什么会这样 究其原因，其实是 iOS 系统的bug，后续的系统已经修复了 5解决方法 虽然是系统bug，但是我们要照顾这部分人群，总不能让人换手机，只能自己解决了 先想想，当页面滚动到底部时，激活定位元素的输入框...发现，的确高度不一样，的确实际DOM 和 显示的元素 错位了 2 、证明没有滚动到底部时，实际DOM 的位置是正常的，和显示元素对应 ?...所以当我们滚动到底部 再激活输入框的时候，按照惯例，它仍然会把页面往上顶 但是已经没有内容给你顶了啊，那怎么办，直接整个文档都给你顶上去了 ?...5解决办法 现在我们知道这个问题 “ 因为滚动到底部时，键盘强行把页面顶上去一部分，并且失焦时，页面没有复位 ” 所以我们可以在 输入框失焦的时候，把页面复位就好了 通常最简单的办法是 window.scrollTop
例如底部的页面跳转：有的系统，虽然进来是这个地方，想操作页面底部的元素，可以操作，也不需要拖动滚动条，它会自动将它拖动到可见区域，然后去操作它。...例如元素在页面正中间，想将它滚动到可见区域，必须有向上滚和向下滚这2种做法。 如果你希望他向上滚。 一种，.scrolllntoView()默认跟页面顶部对齐： ?...如果看到了不可见的报错，前提必须确认其它方面都没有错，因为它不是在可视区才出现这个问题，那就再去加滚动。 滑轮往上拉，是和底部对齐。 滑轮往下拉，是和顶部对齐。 11)这个是和底部对齐的： ?...send_keys+本地地址 情况二： 没有输入框，只有按钮操作。 ? autoit生成au3格式的脚本，只有autoit这个软件可以运行，转换成exe，让Python去调用exe文件执行。...上传操作部分，未完待续~ 补充 以下知识点来自同行的回答，特意感谢同行的帮助。 .text和text()有啥区别？ .text是获取一个element对象的文本属性。
属性会获取包括文本节点在内的所有节点，注意DOM标签与标签之间的空白也会被当成文本节点 在IE8一下的浏览器中，不会将空白文本当成子节点，所以该属性再IE8中会返回4个子元素，而其他浏览器都是9个 -...和Innerhtml类似，但是它会自动将html标签去除掉 ---- 获取兄弟节点，也可能会获取到空白节点 获取到的是空白文本节点 ---- 获取兄弟元素 获取前一个兄弟元素，IE8不支持...将子元素溢出的部分隐藏起来 overflow: auto;如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。...-- 默认禁用，除非将滚动条滑动到最底部 --> 我同意上面的协议 //首先绑定一个滚动条滚动的事件...var p1=document.getElementById("p1"); p1.onscroll=function() { //如果滚动条滑动到了最底部
image 如下代码所示，这个问题的起因正是在解决跳动问题而增加的 center ，因为列表是 reverse ，并且红色的 SliverList 长度只有 3 条，高度不够导致顶部留空白。...所以它实际就是黄色的部分； 所以虽然绿色的 SliverList 虽然新增了数据，但是从 center 往上的高度还是不够，所以就出现了黄色 SliverList 顶部空白的问题； image...运行后也如下图所示，可以看到运行后的代码不会再有空白的情况，也没有新增数据跳动的情况，双向滑动也正常，那你知道为什么吗？...image 是的，我们其实是把顶部留空的问题转移到了底部，但是这个问题在实际业务场景是不成立，进入聊天列表首先就需要先加载满一页的数据，所以： 如果 old 数据本来就不够，例如例子里只有3条，那也就不会有加载更多...还有什么可以优化的小技巧？ 比如增加判断列表是否处于底部，决定在接受到新数据时是否滑动到最新消息。
不能批量操作，全部都回滚 全选，只处理查询出来的这部分数据 数据检查 数据流 数据缺失，数据覆盖面尽可能广一点 数据重置的问题 某些模块的数据未重置，其他模块在操作时，会把老数据带出来... 多条折线，部分有数据部分无数据，日期未对齐 日期未对齐原因排查，相关功能数据是否一致 导致伸缩框失效 子主题 5 饼图 比例和分块大小匹配 网状图... 各节点之间的关系正确 点击标签显示/隐藏 鼠标放上去，显示浮动框 无数据，不能一片空白 数据特别多，可考虑增加图表切换 图表切换 有数据，可正常切换，且切换前后数据正确...附件不能有“X” 口径正确 不同权限用户登录，数据权限范围不同 底部按钮 如果是打开新窗口，关闭 如果是覆盖原页面，返回 审核审批页面 单条审核 填写项 ...审核意见，通过/不通过，单选 审核说明，审核不通过必填，审核通过非必填 确定按钮 审核通过，审核状态变为审核通过 审核不通过，1、审核状态变为审核不通过 2、办理状态回滚为待办理
今天就跟大家分享8个隐藏的排版神技巧，每一个都很实用。 1、自动生成文字 在Word文档空白处输入=rand()，按Enter键之后，立马生成一段官方的随机文字，可以用这段文字进行排版操作练习。...2、自动生成单元格 在排版的时候，想要快速插入一个表格，文档空白处输入+-+，再按回车键，立马出现一个表格。 3、快速输日期和时间 在Word文档空白处，快速输入日期和时间，可输入下面两组快捷键。...快速输入日期：Alt+Shift+D 快速输入时间：Alt+Shift+T 3、快速移动文本位置 选中一段文本，按住鼠标左键不动，然后拖动文本，即可快速将这段文本移动到任意位置。...输入三个"#"按 enter键 快速绘制中间加粗的三直线 8、快速提取不能复制的网页文字 上网查资料，遇到无法复制的网页文字，不要用手一个个打字录入了，使用OCR文字识别工具【天若OCR文字识别】...，精准快速提取纸质文档、图片、网页、书籍中的文字，秒变电子档！
$（即Shift+4）：移动到当前行的结尾处 H（大写）:使光标移动到屏幕的顶部 M（大写）:使光标移动到屏幕的中间 L（大写）:使光标移动到屏幕的底部 Ctrl+b：上滚一屏。...Ctrl+f：下滚一屏。 Ctrl+d：下滚半屏。 Ctrl+u: 上滚半屏。...撤消对一行的更改：输入U来撤消你对一行所做的所有更改，这个命令只有在你没将光标移动到该行以外时才生效。... 为删除一个词，需将光标放置到该词的开头并输入dw 为删除词的部分内容，将光标放到该词要保存部分的右边。...输入dw来删除余下的部分 3.4.3、删除1行 将光标放置到该行的任意处并输入dd；删除多行：ndd 3.4.4、删除行的部分内容 光标放置到该行要保存部分的右边
在IOS12 上，微信版本 v6.7.4 及以上，输入框获取焦点，键盘弹起，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。...当输入框位于页面下部位置时，在 IOS 上，会将 webview 整体往上滚一段距离，使得该获取焦点的输入框自动处于可视区，而在 Android 则不会这样，它只会改变页面高度，而不会去滚动到当前焦点元素到可视区...，加上 pattern 后，前端部分的验证更加简单高效了。...兼容 IOS12 + V6.7.4+ 如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开上面表单输入的 demo ，就会惊奇的发现键盘收起后，原本被滚动顶起的页面并没有回到底部位置，导致原来键盘弹起的位置...了解软键盘弹起页面在 IOS 和 Android 上的表现差异是前提，其次是将焦点元素滚动到可视区，同时要考虑到第三方输入法和某些浏览器上的差别。
此时，您的所有操作都针对所有工作表，无论是设置页眉和页脚还是打印工作表。6.在Excel2000制作的工资表中，只有第一个人有工资表的表头(如编号、姓名、岗位工资.)，并希望以工资单的形式输出它。...如果没有选择一个项目，则在应用表格样式时不会使用它。 18、如何快速复制单元格格式？ 要将格式化操作复制到数据的另一部分，请使用“格式化画笔”按钮。...将它移动到您想要添加斜线，的开始位置，按住鼠标左键并将其拖动到结束位置，释放鼠标，将绘制斜线。此外，您可以使用“文本框”按钮轻松地在斜线的顶部和底部添加文本，但是文本周围有边框。...20、如何快速输入数据序列？如果您需要在表格中输入一些特殊的数据系列，如物料序列号和日期系列，请不要逐个输入。为什么不让Excel自动填写它们呢？...当我们在工作表中输入数据时，我们有时会在向下滚动时记住每个列标题的相对位置，尤其是当标题行消失时。此时，您可以将窗口分成几个部分，然后将标题部分保留在屏幕上，只滚动数据部分。
当呈现的内容是表格时，从 grid 和 table 中选择实现模式时，考虑以下因素。 grid 是一个复合小部件，所以它： 始终包含多个可聚焦元素。 在页面Tab序列中只有一个可聚焦元素。...如果焦点位于列中的底部单元格上，则焦点不会移动。 Up Arrow: 将焦点往下移动一个单元格。如果焦点位于列中的顶部单元格上，则焦点不会移动。...例如，消息的收件人列表可能是个网格，其每个单元格包含一个代表收件人的链接。网格最初可能只有一行，但是随着收件人的添加，会变为多行。...如果焦点位于网格中的第一个单元格上，则焦点不会移动。 Down Arrow: 将焦点向下移动一个单元格。可选地，如果焦点位于列中的底部单元格上，则焦点可能会移动到下一列的顶部单元格。...在应用程序中，快速访问工具栏非常重要，例如，从编辑器的文本区域快速访问到编辑器的工具栏，建议使用文档快捷键，从相关上下文中移动焦点到对应工具栏。
该标签支持的属性多达11个： align 设定标签内容的对齐方式 absbottom：绝对底部对齐（与g、p等字母的最下端对齐） absmiddle：绝对中央对齐...="absbottom">align="absbottom"：绝对底部对齐（与g、p等字母的最下端对齐）。... behavior 设定滚动的方式： alternate： 表示在两端之间来回滚动。 scroll： 表示由一端滚动到另一端，会重复。... 空白 (Margins) <marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align...也可以把你的图片先用表格排版，然后把这个表格的所有语句也加入到marquee中，让这个表格来滚动。
+ H，Alt + 向下键或 Alt + 向上键 移动到下一个或上一个标题 T 或 Shift + T 移动到下一个或上一个表格 P 或 Shift + P 移动到下一个或上一个段落 K 或 Shift...Ctrl + Alt + 向上键或向下键 移动到列中的下一个或上一个单元格 Caps Lock + F5 通知在表格中的位置 Caps Lock + F9 通知列标题 Caps Lock + F10...以及，常用却没有快捷键的功能，比如Word中的“编号”、Excel中的“冻结窗格”、PowerPoint中的“对齐”“选择窗格”等，或编写/录制的宏，可以将其添加到快速访问工具栏，配合Alt +数字快速调用...在表格中，定位到任意一行或选中多行中的任意单元格，Shift + Alt + 上下键可调整这些行在整个表格中的行序，如果选中的单元格在顶部或底部，Shift + Alt + 上下键可实现拆分/合并表格。...Ctrl + 方向键/Home/End – 快速定位 想起来一位外国小哥挑战了九个多小时，终于知道了Excel工作表共有1048576行…… 在空白的列中，Ctrl + 下方向键可以直达，非空白列中会定位到最底部数据
倒是第三点的下拉刷新，以及第二点的上拉监听，却不容易实现。 虽然Android提供了专门的下拉刷新布局SwipeRefreshLayout，但它并没有页面随手势下滚的效果。...因此若想呈现完全仿照京东的下拉刷新特效，只能由开发者编写一个自定义的布局控件了。 自定义的下拉刷新布局，首先要能够区分是页面的正常下滚，还是拉伸头部要求刷新。...所以此处得捕捉页面滚动到顶部的事件，相对应的则是页面滚动到底部的事件。鉴于App首页基本采用滚动视图ScrollView实现页面滚动功能，故而该问题就变成了如何监听该视图滚到顶部或者滚到底部。...getHeight() - getPaddingTop() - getPaddingBottom() == getChildAt(0).getHeight()) { // 上拉滚动到底部...，也不做额外处理； 4、拉到顶之后继续下拉，则隐藏工具栏的同时，还要让下拉头部跟着往下滑动； 5、下拉刷新过程中松开手势，判断下拉滚动的距离，距离太短则直接缩回头部、不进行页面刷新；只有距离足够长，才能触发页面刷新动作
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
