本公众号将简单介绍一下在创建、编辑、转换 PDF 中常用的基本功能。其他更多功能会在以后的推文中再单独进行介绍。1....所有 Acrobat 工具都显示在这个视图中，并按类别列出。如果打开了某个文件，那么在选择工具时，该工具特定的命令或工具栏就会出现在文档视图中。即使没有打开文档，也可以打开某些工具。...如果工具要求打开文档，那么在选取该工具时，系统会提示选择文档。可点击图片放大查看“文档”视图默认情况下，系统将显示用于查看多个 PDF 的带标签界面。...单页视图 窗口只显示一页启用滚动 窗口的页面可连续滚动双页视图 窗口并排显示两页双页滚动 窗口并排显示两页,连续滚动可点击图片放大查看阅读模式 与 全屏模式在阅读模式下，可以隐藏所有工具栏和任务窗格，以最大化屏幕上的查看区域...在全屏模式下，将只显示文档；菜单栏、工具栏、任务窗格和窗口控件都将处于隐藏状态。
2 keyup 键盘松开一瞬间触发的事件 3 keypress 键盘按下松开整个过程触发的事件 //keydown（）和keypress区别 keydown（）按下任意键都会触发...，但keypress（）事件只在按下键盘中任意字符键（A-Z）时触发，功能键不会触发（如shift ctrl 等） 4 event.which 指示按下的哪个键 1 ... focusin可以在父元素上检测子元素获得焦点的情况 而focusout可以在父元素上检测子元素失去焦点情况 四 其他事件 1 scroll（）滚动滚动条时触发的事件 2 resize... 获取显示器屏幕位置的坐标 //整个屏幕的高度 不会随着滚动条变化而变化 //clientX/clientY 获取相当于页面视口的坐标 //除去上下窗口 不会随着滚动条变化而变化...在mousedown、mouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值（相当于event.button）。
但是，可以使用 Javascript 滚动内容。 Scroll ? 在上图中，无论内容是否长，滚动条总是可见的。注意，这取决于操作系统。...Auto auto这是一个聪明的关键字，仅当内容比其容器长时才显示滚动条。 ? 注意，在图中，只有当内容比其容器长时，滚动条才可见。...在这种情况下，最好使overflow: hidden将其隐藏在包装器上，然后向其添加border-radius，这样我们只需要设置一个地方就行了。...grid 项目 CSS 网格有三种情况可以导致水平滚动，来看看它们。 对列使用像素值 ? 当使用像素值时，这将在视口宽度较小时引起问题。...在这种情况下，我要做的是打开DevTools，然后开始删除元素并注意。 一旦水平滚动消失了，我就可以确定引起问题的元素。
杂谈 最近很多热心网友说想看一些硬核的，我们在电影里常常可以看到黑客入侵汽车，完成致命打击的画面，那这样的技术在现实生活中究竟存在吗？...图文介绍 原理介绍 之前很多汽车的开锁技术中都使用了静态代码，通过无线电向您的汽车发送二进制代码，确认后车门就会被打开 如果汽车没有发送指定的代码，则汽车将不会被解锁，譬如图中的绿色代码是我们发送的...厂商们制作出来一种叫做滚动代码（Rolling Codes）的东西，每次按下车钥匙时，它都会发送不同的代码给汽车，所以钥匙里有很长的一串代码，同样地车里也是一长串代码 你按下钥匙的时候，它会发送第一串代码...用户在使用车钥匙打开车门的时候，我们先进行干扰，记录第一次发送的代码，这时车门并没有打开； 用户会再次按下钥匙，这时我们继续干扰记录，但是发送第一次的代码，车门打开了；...哪个是开车门，哪个是关车门，反倒是滚动代码(Rolling code)有所不同 因此，如果想凭借自己的能力构造代码发送给汽车是大概率不可能打开车门的。
●在浏览器中，我们可以通过滚动条来移动视口以看到更多网页内容。 更形象的视口解释： ?...●scale 倍数越小，视口越大 Q此处插入一个问题： iPhone6S 的 safari 中，不做任何 viewport 设置情况下，默认 initial-scale 的值为多少？...（device-width 对应数值在竖屏模式下为 375，横屏模式下为 667） 既然，两个属性的作用都是设置初始视口大小，那同时设置且存在冲突的情况下，浏览器会怎么处理呢？...默认情况下视口的宽度为 980px，设备宽度(device-width)为 375，所以，默认的 initial-scale 为 375/980= 0.38265。...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。
在这种情况下，我们同样可以基于行的概念实现块级虚拟滚动，即只渲染当前可见区域范围的块，实际上如果独立的块比较大的时候还是有可能影响性能，所以这里仍然存在优化空间，例如飞书文档就对代码块做了特殊处理，即使在嵌套的情况下仍然存在虚拟滚动...视口内选择: 当用户在视口内选择相关块的时候，我们可以认为这部分选区在有无虚拟滚动的情况下都是正常处理的，不需要额外推演场景，保持原本的View Model映射逻辑即可。...那么类似于锚点跳转的能力在我们虚拟滚动的时候就可能会出现问题，试想一下当用户用户的hash值是在某个块中的，而显然在虚拟滚动的情况下这个块可能并不会实际渲染出来，因此无论是浏览器的默认策略或者是原本编辑器提供的能力都会失效...由于查找替换中存在文档检索、虚拟图层等功能需求，所以在虚拟滚动的情况下对于我们的控制调度依赖更大。...，通常查找替换都会存在上一处下一处的按钮，那么在这种情况下我们需要思考一个问题，因为我们的Block是可能存在不被渲染的情况的，那么此时我们不容易取得其高度信息，因此上一处下一处的调度可能是不准确的。
注意事项： 弹出窗口关闭和打开会自动延迟以添加动画 利用PopupInterface中定义的enforceSpaceConstraints。 如果内容大小太多添加滚动到页面，这将非常有用。...对于在示例中测试的案例的OnPush，它没有设置ChangeDetectionStrategy。...这意味着可以在OnPush模式下在另一个组件中使用此组件，但由于任何此类实现都需要所有内容子项支持OnPush，因此由实现者自行决定。...onSomethingThatShouldCloseTheDropdown() { _dropdownHandle.close(); } } Inputs: autoDismiss bool 设置弹出窗口是否应在文档按下时关闭...constrainToViewport bool 设置是否应将弹出窗口限制为视口。 如果这是true，那么弹出窗口的位置将被限制为始终位于视口内而不是移出屏幕外。
所选视穹 用于所选视穹的键盘快捷键 键盘快捷键 操作 Ctrl + 上箭头 将视穹向远离照相机的方向移动。 Ctrl + 下箭头 将视穹向照相机的方向移动。...按住 V 键同时单击并拖动，以围绕您单击的枢轴点旋转。 V + 方向键 围绕视图中心旋转。 按 V 并按上箭头键、下箭头键、左箭头键或右箭头键来围绕视图中心旋转。...左键拖动 - 平移 单击左键 - 弹出 滚动滚轮 - 缩放 单击并拖动滚轮 - 倾斜和旋转（在 3D 中） 右键拖动 - 持续缩放 在使用其他工具进行居中并放大或居中操作时，请分别按下 C+Shift...按住 V 键同时单击并拖动，以围绕您单击的枢轴点旋转。V + 方向键围绕视图中心旋转。按 V 并按上箭头键、下箭头键、左箭头键或右箭头键来围绕视图中心旋转。B + 拖动在 3D 场景中环视。...要在不打开字段视图的情况下重新显示所有字段，请单击表格视图顶部的菜单按钮，然后单击显示所有字段。此时，所有隐藏字段将恢复为显示状态，并在表格视图和其他对话框中变为可用状态。
现代的浏览器默认情况下都是冒泡模型，而捕获模式则是早期的Netscape默认情况。而现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式。 3....任意鼠标按钮按下时触发 mouseup 释放鼠标按钮触发 mousemove 鼠标在元素内部移动的时候重发触发 mousewheel 滚轮事件 mouseover 鼠标位于元素外部，将其首次移入另一个元素边界之内时触发...，页面没有滚动的时候，pageX和pageY的值与clientX和clientY值相等 3.屏幕位置 screenX,screenY 4.修改键 值为boolean类型，用来判断对应的按键是否被按下...shiftKey ctrlKey altKey metaKey 5.鼠标按钮 mousedown,mouseup，该事件的event对象中包含了button属性，表示按下或释放的按钮。...0表示主鼠标按钮 1表示中间的滚动按钮 2表示次鼠标按钮 5.
同时注意视图工具 按钮从手型变成了眼睛。 视图工具的旋转模式 Option键 昀后，你可以通过按下 Command按钮进入缩放模式。在这种模式下，单击并拖动鼠标将前后缩放你的视图。...播放按钮和状态栏 按下播放按钮 (Play Button)进入播放模式。当你的场景在播放模式下时，你还可以移动，旋转和删除物体。你也可以改变变量的设置。...这将允许你在更大的屏幕尺寸上查看更多的细节。再次按下空格键可以切换到普通视图模式下。 2....你将看到组件显示在物体的检视(Inspector)视图中。缺省情况下脚本也包含在组件(Component)菜单中。 ...现在你将会发现刚体属性显示在检视面板中，如果在该物体被选中的情况下按下播放键(Play)你将会有惊喜的发现。注意刚体是如何在一个空物体上添加功能的。
，所以想写篇文章记录一下。...+ 溢出内容的尺寸，这个只针对dom的子元素出现溢出情况时，才有效果，不然它始终和clientHeight相等 scrollTop 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度...在没有滚动条时scrollTop==0。...; var Y = node.getBoundingClientRect().top+node.scrollTop; 一个demo加深印象 有一个列表，当我们输入文段编号，列表会将选中文段滚动到视图中...大概是这样 实现思路就是，去拿到选中元素的clientHeight和offsetTop,并和列表的高度区间做比较，计算出元素是在列表视口的内部，还是溢出的视口，如果溢出了视口，那么就回滚。
它减轻了服务器压力，使其能够处理更多的用户请求。 改进的交互时间(TTI)：交互时间测量网页完全交互所需的时间，允许用户与按钮、链接和其他元素进行交互。...然后，我们创建一个新的Intersection Observer实例，传入一个回调函数，每当观察的元素（在这种情况下是懒加载的图片）进入或退出视口时触发。...与Intersection Observer API最适合图像和特定元素不同，基于滚动事件的懒加载提供了更多的灵活性。您可以将其应用于任何内容或复杂组件，这些内容可能不适合“在视图中”的概念。...在这种情况下，延迟加载的内容可能无法加载，从而给部分用户带来糟糕的用户体验。 复杂的实现：实现延迟加载可能变得复杂，特别是在具有复杂结构和各种类型资源的网站上。...让我们来看一些实施延迟加载的最佳实践： 优化图像和媒体文件：为了优化图像的懒加载，使用适当的图像格式并在不损失质量的情况下进行压缩。
scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。...没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。...scrollHeight也包括 ::before 和 ::after这样的伪元素。 换句话说Element.scrollHeight在元素不存在滚动条的情况下是恒等于clientHeight的。...但是如果出现了滚动条的话scrollHeight指的是包含元素不可以见内容的高度，出现滚动条的情况下是scrollHeight恒大于clientHeight。...计算元素是否出现在视口内 利用的还是元素距离视口的位置小于视口的大小。 注意即便变成了负值，那么也表示元素曾经出现过在屏幕中只是现在不显示了而已。
同时还参考网上文章，增加了一些特殊情况下可能出现问题的优化点。 1、吸顶元素能够继续吸顶 2、吸底元素（也就是按钮）能够在键盘弹出之后，出现在键盘的上方 3、键盘弹起，输入框出现在可视区内。...我们当时的情况下，客户端的jsb能力只能够支持简单的一个返回按钮加一个居中标题作为header。所以有右上角的“历史评价”就不能够直接用jsb能力写，所以只能和ui同学商量，将原本的设计方案改一下。...衍生问题: 但这样引出了一个新的问题：在安卓系统下的app端，会有底部按钮被遮挡的问题。 GIF 如下： ?...2、吸底元素（也就是按钮）能够在键盘弹出之后，出现在键盘的上方 对于这个问题，因为安卓表现是webview缩小，所以在安卓上并不存在这个问题，对于ios，因为ios向上滚动的距离最大是键盘的高度，但是也有可能滚动距离不是键盘高度...webview滚动距离等于ios键盘的高度，达到了吸底按钮吸底的效果。
这已经是多年来网络上的默认行为了。在本文中，我们将探讨这个问题，为什么会发生这种情况，以及如何使用虚拟键盘API来解决它。让我们开始吧。 问题 在深入细节之前，让我们通过一个例子来了解一下。...使用虚拟键盘API修复键盘下隐藏的内容 由于虚拟键盘API的存在，我们可以定义视觉和布局视口相等。...VirtualKeyboard API 的使用案例 底部固定操作 在较小的视口上，您可能需要一个固定在界面底部的呼叫行动按钮或页脚。 考虑下面的图示，我们有一个固定在底部的CTA按钮。...你可能会对由于标题和固定底部的存在而导致的空间减少感到困惑。我们可以使用垂直媒体查询来在垂直空间足够的情况下显示标题。...无法滚动到页面的最底部 当视口底部有一个带有 position: fixed 的项目时，我们通常会添加 padding-bottom 来偏移页面，使用户可以滚动到最底部。
除非在极少的情况下，必须提供指导，那么可以用“点击”这个词，在引用按钮时保持大写，不要在引号中包含按钮标题。 警示框按钮 使用双按钮警示。双按钮警示框给予了用户一个比较容易的双选项的选择方式。...默认情况下，图像视图是不可进行交互的。 ? 如果可能的话，请确保动画序列中的所有图像大小一致。理想情况下，应对图像进行预分类以适应视图，避免系统再进行任何缩放。...页面元素通常会显示有多少页面，多少屏，或者多少数量的内容是当前可用及可见的。如果你在滚动视图中显示页面控制元素，则需要关闭滚动视图中的滚动条以免为用户带来困扰。...某些情况下，在新数据加载出来之前，先展示之前的旧数据也是有意义的。 在内容加载时配以进度条指示进度。...文本视图可以是任何高度，并可以通过滚动的方式显示额外的内容。 默认情况下，文本视图中的文本是左对齐的，并使用黑色的系统字体。如果文本视图可编辑，则在视图内部点击时，屏幕下方会弹出键盘。 ?
防止图像被拉伸或压缩 在无法控制图片高宽比的情况下，如果用户上传的图片与高宽比不符，最好提前考虑并提供解决方案。 在下面的例子中，我们有一个带有照片的卡片组件。它看起来不错。...CSS变量回退 CSS变量在网页设计中得到了越来越多的应用。我们可以应用一种方法，在CSS变量值因某种原因为空的情况下，以一种不破坏体验的方式使用它们。 通过 JS 输入CSS变量的值时特别有用。...这种方法可以在变量可能失败的情况下使用。 7.使用固定宽度或高度 破坏布局的常见情况之一是对一个有不同长度内容的元素使用固定的宽度或高度。...我们可以控制显示滚动条或不只是在有很长的内容的情况下。...作为用户，在不需要滚动条的情况下看到滚动条是很混乱的。 .element { overflow-y: auto; } 使用overflow-y: auto，滚动条只有在内容较长时才可见。
滚动条上的按钮 (上下箭头) ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分 ::-webkit-scrollbar-corner — 边角，即当同时有垂直滚动条和水平滚动条时交汇的部分...::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮) 注意： (1)浏览器的支持情况： ::-webkit-scrollbar 仅仅在支持Webkit...(3)滚动条上的按钮（:decrement、:increment） 可以设置图片，这点会在下面demo中展示。... — 滚动条三角箭头的颜色 scrollbar-face-color — 滚动条上滚动滑块颜色 scrollbar-track-color— 滚动条轨道、按钮背景的颜色 scrollbar-shadow-color...图中我对其中的一些属性做了标注，滚动条外层轨道属性并未在图中标注，可打开chrome浏览器控制台查看属性： <!
在“命令”标签中，选中“类别”下的“新菜单”项，再将“命令”下面的“新菜单”拖到菜单栏。 按“更改所选内容”按钮，在弹出菜单的“命名”框中输入一个名称(如“常用文档”)。 ...2.执行“视图→视面管理器”命令，打开“视面管理器”对话框，单击“添加”按钮，弹出“添加视面”对话框，输入一个名称(如“上报表”)后，单击“确定”按钮。 ...4.以后需要打印某种表格时，打开“视面管理器”(如图4)，选中需要打印的表格名称，单击“显示”按钮，工作表即刻按事先设定好的界面显示出来，简单设置、排版一下，按下工具栏上的“打印”按钮，一切就OK了。...因此，在很多情况下，都会需要同时在多张表格的相同单元格中输入同样的内容。 那么如何对表格进行成组编辑呢?...点击Excel 2002“工具”菜单中的“选项”命令，然后在“常规”选项卡中选中“用智能鼠标缩放”复选框，点“确定”后，我们再来看看现在的鼠标滚轮都有些怎样的功能： 在“智能鼠标”的默认状态下，上下滚动鼠标滚轮
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
