开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当滚动位置从后退按钮导航或重新加载恢复时，是否在Internet Explorer中的“domready”之前获得准确的滚动位置？

在Internet Explorer中，当滚动位置从后退按钮导航或重新加载恢复时，是在“domready”之前获得准确的滚动位置的。

“domready”是指文档对象模型（DOM）已经完全加载并解析完成，但是可能还没有加载完所有的外部资源（如图片、样式表等）。在Internet Explorer中，当页面通过后退按钮导航或重新加载时，浏览器会尝试恢复之前的滚动位置。这意味着在“domready”事件触发之前，浏览器已经将滚动位置恢复到了之前的状态。

这种行为的优势是可以提供更好的用户体验，用户可以无缝地回到之前的滚动位置，而不需要手动滚动页面。这对于长页面或需要浏览大量内容的网站特别有用。

在这种情况下，腾讯云提供的相关产品和服务可以帮助开发者更好地处理滚动位置的恢复。例如，腾讯云的CDN加速服务可以提供快速的页面加载速度，从而减少页面恢复时的延迟。腾讯云的云服务器（CVM）可以提供稳定可靠的服务器运行环境，确保页面恢复时的滚动位置准确无误。

更多关于腾讯云相关产品和服务的信息，请访问腾讯云官方网站：https://cloud.tencent.com/

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

无限滚动加载最佳实践

导航条保持可见使用无限滚动时候，最好保持导航条持续可见，这样可以很快导航到页面或应用的不同区域，对用户来说也更简单。如果找不到导航条，用户将不得不一路向上将页面滚回去。 ?...如果你的网站或应用有页脚，且它对你（或者，更要紧的，对你的用户）很重要，那就应该用“加载更多”的方法。新内容不会自动加载，直到用户点击了“加载更多”的按钮。...返回按钮将用户待回至之前的位置有时候，无限滚动的实现带来一个主要的可用性缺陷：滚动位置并未被记录为“状态”。如果用户从列表中的链接跳转了，然后点返回按钮，他们希望能回到页面原来相同的位置。...Flickr 监听用户点击浏览器后退按钮的行为，满足用户的期望。APP 记住用户的滚动位置，所以当用户按后退按钮的时候，返回到原始位置。 ? 4....当网站或应用提供书签功能的时候，用户会使用的。比方说，Pinterest，使用书签工具帮助用户保存创意。 ? 5. 加载新内容时提供视觉反馈当内容在加载的时候，用户需要明确的指示，说明正在进行中。

4.3K2 0

深入理解浏览器原理

8默认浏览器，引擎Trident Internet Explorer 9 Internet Explorer 8：Windows 7集成 Internet Explorer 7：Windows Vista...不同进程作用浏览器：控制应用程序chrome部分，包括地址栏，书签，后退和前进按钮。...当导航时，网络线程根据注册的范围检查域名，若url已注册Service Worker，UI线程找到渲染进程执行ServiceWorker代码，从缓存加载数据或从网络加载新资源。...在解析构建DOM时，主线程可以逐个请求它们。为了加快速度“预加载扫描器”同时运行。 2.3 JavaScript阻塞解析当遇到时，暂停HTML解析，加载解析执行JS代码。...4) 绘制四边形：一旦图块被光栅化，绘制四边形的图块信息（图块在内存中的位置、绘制图块页面中的位置） 5) 合成框架：合成器线程可以优先考虑视口（或附近）内的删格线程，以便优先被光栅化。

4.6K3 1

最新iOS设计规范四｜3大界面要素：视图(Views)

栏（Bars）栏，可以告诉用户在APP中当前在所在的位置、能提供导航，还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种：导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...如果传达的含义足够清晰明确，可以使用“关闭”按钮（例如“取消”或“完成”），例如退出是否保存更改。若无存在的必要，弹出窗口应自动关闭。当用户点击浮层之外的区域或浮层中的关闭/取消按钮时，浮层应该关闭。...某些情况下，在新数据加载出来之前，先展示之前的旧数据也是有意义的。在内容加载时配以进度条指示进度。...相反，将内容添加到表的开头或结尾，让用户在准备好时滚动到它。一些APP在加载新数据时会显示一个加载器，并提供一个直接跳转到该数据的控件。最好还包括一个刷新控件，这样用户就可以随时手动进行更新。...十二、网页视图（Web Views）网页视图可以在APP中加载和显示丰富的网页内容。例如：嵌入式HTML和网站；邮箱APP使用网页视图来在消息中显示HTML内容。 ? 适当地使用前进和后退导航。

8.5K3 1

【交互探讨】无限滚动还是分页展示，这是个问题！

你天生的设计直觉一开始可能会告诉你要忠于老式的分页。然而，在您意识到之前，您可能会想无限滚动是否是一个不错的选择，因为您拥有非常独特的用例。那么无限滚动真的是个好主意吗？...如果我们想要到达页脚，每次滚动时，我们都需要滚动快一点，以便在新的项目流进入之前获得一个到达页脚的神奇机会。有时用户发现自己面临滚动挑战而同时按下 Esc键以便及时取消无限滚动。...在一些实际案例中，当用户开始向下滚动时，先是会自动出现更多项目，一旦浏览内容数量达到某个阈值时，就会出现“加载更多”按钮。 Crutchfield 上使用的“加载更多”模式。...例如，一旦用户浏览了“页面”1、2 和 3，现在已经登陆“页面”4，是否应该单击“返回”按钮将他们从第4页带到第3页，或者到他们在第1页之前访问过的上一页？...不过，如果您的用户经常探索许多选项，并且浏览是您网站上非常典型的属性，尤其是当客户在购物车中添加多个商品或一次操作大量数据条目时，无限滚动可能非常有用——但前提是可访问性和性能考虑，这才是其设计的核心。

3.2K2 0

VUE框架：vue2转vue3全面细节总结（4）滚动行为

滚动行为我们可以通过 vue-router 自定义路由切换时页面如何滚动。比如，当跳转到新路由时，页面滚动到某个位置；切换路由时页面回到之前的滚动位置。...第三个参数 savedPosition，只有当这是一个 popstate 导航时才可用（点击浏览器的后退/前进按钮，或者调用 router.go() 方法）。...) { return { el: to.hash, } } }, }) 滚动到之前的位置返回 savedPosition，在按下浏览器后退/前进...按钮，或者调用 router.go() 方法时，页面会回到之前的滚动位置： const router = createRouter({ scrollBehavior(to, from, savedPosition...我们还可以在返回的对象中添加 behavior: 'smooth' ，让滚动更加丝滑。延迟滚动有时候，我们不希望立即执行滚动行为。例如，当页面做了过渡动效，我们希望过渡结束后再执行滚动。

2825 0

JavaScript 高级程序设计（第 4 版）- BOM

，返回值单位为CSS像素可以使用moveTo()和moveBy()移动窗口（依浏览器而定，这俩方法部分或全部被禁用） moveTo()接收要移动到的新位置的绝对坐标x和y moveBy()接收相对当前位置在两个方向上移动的像素数...# 导航与打开新窗口 window.open()可以用于导航到指定URL，也可以用于打开新浏览器窗口接收四个参数：要加载的URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否代替当前加载页面的布尔值...，除了hash外，设置location的一个属性就会导致页面重新加载新URL 如果不希望增加历史记录，可以使用replace()方法，重定向后后退按钮是禁用状态 reload() 能重新加载的当前显示的页面...空参可能会从缓存加载，传参true可强制从服务器重新加载 # navigator对象 navigator 对象的属性通常用于确定浏览器的类型检测插件通过plugins数组来确定，数组中每一项都包含如下属性...对象点击“后退”按钮直到返回最初页面时， event.state 会为 null 可以通过 history.state 获取当前的状态对象，也可以使用replaceState()并传入与pushState

1.2K1 0

每天都在用的浏览器，你知道它是如何工作的吗？

Windows 8默认浏览器，引擎Trident Internet Explorer 9 Internet Explorer 8：Windows 7集成 Internet Explorer 7：Windows...不同进程作用浏览器：控制应用程序chrome部分，包括地址栏，书签，后退和前进按钮。...当导航时，网络线程根据注册的范围检查域名，若url已注册Service Worker，UI线程找到渲染进程执行ServiceWorker代码，从缓存加载数据或从网络加载新资源。...在解析构建DOM时，主线程可以逐个请求它们。为了加快速度“预加载扫描器”同时运行。 2.3 JavaScript阻塞解析当遇到时，暂停HTML解析，加载解析执行JS代码。...4) 绘制四边形：一旦图块被光栅化，绘制四边形的图块信息（图块在内存中的位置、绘制图块页面中的位置） 5) 合成框架：合成器线程可以优先考虑视口（或附近）内的删格线程，以便优先被光栅化。

2.2K2 0

浏览器是如何进行页面渲染的

除了初次加载页面，用户的很多操作都同样涉及到浏览器渲染，比如以下功能：地址栏输入 URL点击刷新和停止按钮，控制页面加载点击后退和前进按钮，快速实现页面跳转书签和收藏，快速打开页面除了这些，实际上我们和浏览器的几乎所有操作...浏览器进程同样支持多线程，包括：UI 线程：用于绘制浏览器的按钮和输入字段网络线程：用于处理网络请求，以及从服务器接收数据存储线程：用于控制对文件的访问这些线程其实我们在学习其他内容的时候也会涉及到，比如在页面的加载过程中...当数据和渲染器进程都准备好后，HTML 数据通过 IPC 从浏览器进程传递到渲染器进程中。渲染器进程接收 HTML 数据后，将开始加载资源并渲染页面。...光栅化可以被 GPU 加速，光栅化后的位图会被存储在 GPU 内存中。根据前面介绍的渲染流程，当页面布局变更了会触发重排和重绘，还需要重新进行光栅化。...合成的真正目的是，在移动合成层的时候不用重新光栅化。因为有了合成器线程，页面才可以独立于主线程进行流畅的滚动。到这里，页面才真正渲染到屏幕上。

4264 0

实现流畅的页面切换？日本的前端教教你...

确实，简单的组合的话确实会顺利显示页面切换动画，但是如果要让动画流畅，就会有以下一些课题：「后退」按钮点击时的延迟这是因为Router默认是对dom进行替换操作。...后退后没有恢复到上次的滚动位置 SPA应用中经常遇到这种问题。虽然可以通过JavaScript暂存滚动位置进行恢复，但是这种实现并不简单，很容易产生页面的上下跳动等不流畅的问题。...另外除了垂直滚动位置之外，滚动图等水平方向上的滚动，以及无限加载等情况也会存在，这样以来JavaScript的逻辑会变得越来越复杂。...懒加载的图片会重新加载图片在滚动到可显示位置时才予以加载，除此之外用一个placeholder来占位 - 这是一种常见的优化手段。但是在页面后退的时候，图片会重新现实一次，有些违和。...这些问题用一句话总结一下就是「在页面后退的时候，之前页面中因为滚动・点击等用户行为所产生的DOM变化如何重现」参考IOS的实现为了看起来像原生app，那么我们最好参考一下原生app的实现。

6121 0

Human Interface Guidelines —— 导航栏（Navigation Bars）

Navigation Bars 位置 Navigation Bars显示在app屏幕的顶部，位于status bar（状态栏）下方，并可穿过一系列不同层级的屏幕进行导航。 ...内容当显示一个新的屏幕时，一个后退按钮（通常标有前一个屏幕的标题）出现在该bar的左侧。...如果你实现这类行为，让用户用简单的手势恢复导航栏，如点击。替代在不需要导航时使用toolbar，或者需要多个控件来管理内容。...在某些app中，大标题的大号加粗文本可以帮助用户在浏览和搜索时知道自己所在位置。例如，在 tabbed layout中，大型标题可以帮助看清当前活动tab，并在用户滚动到顶部时通知用户。 ...当用户开始滚动内容时，大标题转换为标准标题。大标题在所有应用程序中没有意义，永远不会与内容竞争。

2.4K11 0

Vue Router深入学习(二)

例如，在渲染用户信息时，你需要从服务器获取用户的数据。 2.1 导航完成后获取数据当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。...通过这种方式，我们在导航转入新的路由前获取数据。...我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法 <p...scrollBehavior(to, from, savedPosition) { return { el: "h2", top: 50, }; }, }); 4.3 恢复之前的位置...返回 savedPosition，在按下后退/前进按钮时，就会恢复之前的位置。

8172 0

Chrome 浏览器最牛插件之一 Vimium

安装vimium 首先打开chrome浏览器，安装vimium插件操作命令废话不多说，直接上快捷键 ---- 导航当页： ?...搜索网址，书签，或历史记录，在新的页面打开 b 搜索书签，在当前页面打开 B 搜索书签，在新的页面打开 ---- 查找： / 进入查找模式，输入关键字查找，ESC退出...关闭当前页面 X 恢复刚才关闭的页面 T 在当前所有的tab页面中搜索 pin/unpin current tab ---- 标记： ma 当页标记，只能在当前...tab页面跳转，m + 一个小写字母 mA 全局标记，可以再切换到其他tab的跳转过来，m + 一个大写字母 `a 跳转到当页标记 `A 跳转到全局标记 `` 跳回之前的位置...，可以从任意控制命令中退出，也可以从任意模式中退出（例如插入模式、查找模式）

8631 0

关于如何做一个“优秀网站”的清单——规范篇

从详细信息页面返回，保留上一个列表页面上的滚动位置确认方法：在应用程序中查找列表视图。向下滚动点击一个项目进入详细页面。在详细页面上滚动。...按返回，确保列表视图滚动到与细节链接/按钮被点击之前相同的位置。改善方法：当用户按“返回”时，恢复列表中的滚动位置。有些路由库可以帮你完成这个功能。...下面是天狗网的页面，在列表中点击详情页后，再后退返回列表时，列表页仍然能滚到上次进入的位置点击时，输入框不会被屏幕键盘遮蔽确认方法：找到一个包含文本输入的页面。...改善方法：在您的UI中提供社交共享按钮或通用共享按钮。...如果是通用按钮，您可能希望在点击时将URL直接复制到用户的剪贴板，提供他们的社交网络来分享，或尝试新的Web Share API与Android上的本机共享系统集成。

3.2K7 0

vue-router详解及实例

，没有合理地利用缓存单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置简介使用 Vue.js ，可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，...导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。该方式会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。...导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。该方式在导航转入新的路由前获取数据。...我们可以在接下来的组件内的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法。滚动行为只在 HTML5 history 模式下可用。...当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

2.9K3 1

前端猿要了解的基本浏览器(BOM)知识

**可是不一样的地方就在全局作用域，在此作用域下定义的变量的数据属性之一 [[Configurable]]**默认为 false，这就导致无法删除，强行使用 delete 是无效的，在 IE9 之前的浏览器中还会报错...导航和打开窗口 window.open() window对象中最为常见的方法，在JS代码里面打开网页的最常见的方法。...会强制在弹出窗口中显示地址栏另外的浏览器甚至规定，在一个页面尚未加载完成时，不允许执行 window.open() 语句，只能通过单击某个浏览器提供的按钮或者敲键盘打开当然也可以为自己的浏览器安装弹窗屏蔽插件...location.replace("http://www.tzwlink.xyz/"); reload() 重新加载页面 location.reload() 重新加载，从缓存中 location.reload...(true) 重新加载，从服务器 navigator 对象暂时跳过 screen 对象用处不大，暂时跳过 history 对象记录着用户上网的记录，但是具体访问过哪些网址，对于开发人员也是屏蔽的

8741 0

一文带你真正了解histroy

---- history . scrollRestoration 返回会话历史记录中当前条目的滚动恢复模式。...有两个可取的值: auto(默认) 在返回历史记录的时候会恢复用户已滚动到的页面上的位置 image.png manual 在返回历史记录的时候不会还原用户已滚动的页面位置上,用户必须手动滚动到该位置...pushState()或者replaceState()的之前默认是null,如果不使用可以设置为null ---- history . back() 这个方法是返回会话历史记录中的上一个页面，如果没有上一页面...返回页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页 ---- history.forward() 这个方法是会话历史记录向前移动一个页面，如果没有页面，什么都不做。...返回页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页 ---- history .go(delta) 从会话历史记录中加载特定页面。

8462 0

为了实践微前端，重构了自己的导航网站

，但是有一个问题，当在微应用的首页时显然是不需要这个返回按钮的，我们可以通过判断当前的路由和微应用的activeRule是否一致，一样的话就代表是在微应用首页，那么就不显示返回按钮： <div class...$"); isInHome.value = reg.test(payload.value.activeRule); }); 2.微应用页面切换时滚动位置恢复如上面的动图所示，当从列表页进入到详情页再返回列表时...，列表回到了顶部，这样的体验是很糟糕的，我们需要记住滚动的位置并恢复。...可以通过把url和滚动位置关联并记录起来，在router.beforeEach时获取当前的滚动位置，然后和当前的url关联起来并存储，当router.afterEach时根据当前url获取存储的数据并恢复滚动位置...，所以qiankun会去加载对应的微应用，然而可能这时页面上连微应用的容器都没有，所以会报错，解决这个问题可以在页面加载后判断初始路由是否是小程序的路由，是的话就恢复一下，然后再去注册微应用： if (

5532 0

来自用户体验大师的100个UX设计建议——上篇

网站应该提供用户一个强大的视觉指示器，用于滚动页面和查看是否有更多的内容。 8. 网站页面越长，用户滚动到底部的可能性就越小。 9....温暖、明亮的颜色可以应用在显眼位置，寒冷、黑暗的颜色则应用在背景中。 3.png 四、关于加载设计 15. 确保网站用户能够快速轻松地完成他们的主要目标 16....在设计移动布局时，考虑用户是否会单手或两只手使用设备的情况。 5.png 六、关于导航设计 28. 在网站上设置一个明显的路径供用户访问导航菜单。 29....如果你的网站层次结构超过3-4级，是时候考虑重新设计了。 30. 考虑使用粘性菜单导航(跟随浏览器滚动的导航)，特别是在较长的网页中或需要快速访问时。 31....一个好的网站导航并不会妨碍网页，使用后会消失在背景中。 32. 导航与网站应该保持一致，不能改变整个网站的风格。 33. 导航标签需要具体化，使用承载信息最多的单词，不要超过2-3个单词。 34.

1.7K3 0

Azure 机器学习 - 无代码自动机器学习的预测需求

机器学习工作室是一个整合的 Web 界面，其中包含的机器学习工具可让各种技能水平的数据科学实践者执行数据科学方案。 Internet Explorer 浏览器不支持此工作室。...三、创建并加载数据集在配置试验之前，请以 Azure 机器学习数据集的形式将数据文件上传到工作区。这可以确保数据格式适合在试验中使用。...这是要将数据文件上传到的存储位置。在“上传”下拉菜单中，选择“上传文件”。在本地计算机上选择“bike-no.csv”文件。这是作为必备组件下载的文件。...在“确认详细信息”窗体上，确认信息与先前在“基本信息”和“设置和预览”窗体上填充的内容匹配。选择“创建”以完成数据集的创建。当数据集出现在列表中时，则选择它。选择“下一页”。...以下示例进行导航，从作业创建的模型列表中选择模型。然后，选择“概述”和“指标”选项卡，查看选定模型的属性、指标和性能图表。

2412 0

接上一篇事件详解

alert(1); }); script.src = "a.js"; document.body.appendChild(script); }); 焦点事件：当元素获得或失去焦点时触发...，也是在鼠标滚轮滚动时触发，与mousewheel事件一样，但是他的有关鼠标滚轮信息保存在detail属性中，当鼠标向前滚动时，这个属性值是-3的倍数，当鼠标滚轮向后滚动时，这个属性值是3的倍数；也可以给...)，在Ajax应用中，开发人员经常使用url参数列表保存状态或导航信息；我们必须把hashchange事件添加到window对象中，然后当url参数列表只要发生变化就会调用此事件，此事件对象event...；90表示向左旋转的横向模式（主屏幕按钮在右侧），-90表示向右旋转的横向模式(主屏幕按钮在左侧)，理解移动端的事件—触摸与手势事件有以下几个触摸事件： touchstart: 当手指触摸屏幕时触发...touchmove:当手指在屏幕上滑动时连续地触发，这个事件发生期间，我们可以使用preventDefault()事件可以阻止滚动。 touchend: 当手指从屏幕上移开时触发。

1.9K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭