scrollIntoView 在所有浏览器中都有效吗?

2023-12-21

Does scrollIntoView()适用于所有浏览器?如果没有的话有没有jQuery选择?


是的,但用户体验很差。

正如@9bits 指出的那样,这长期以来一直是所有主流浏览器都支持 https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView#Browser_compatibility。不用担心这个。主要问题是它的工作方式。它只是跳转到可能位于页面末尾的特定元素。通过跳转到它,用户不知道是否:

  • 页面已向上滚动
  • 页面已向下滚动
  • 他们已被重定向到其他地方

前两个可以通过滚动位置来确定,但谁说用户在跳转完成之前就记录了滚动位置?所以这是一个不确定的动作。

The last one may be true especially if the page has moving header that gets scrolled out of view and remaining page design doesn't imply anything on being on the same page (if it also doesn't have any total height vertical element like left menu bar). You'd be surprised how many pages have this problem. just check them out yourself. Go to some page, look at it at top, then press End key and look at it again. It is likely that you'll think it's a different page.

动画scrollintoviewjQuery 插件来救援

这就是为什么仍然有执行滚动到视图的插件 http://erraticdev.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html而不是使用原生 DOM 函数。它们通常会设置滚动动画,从而消除上述所有 3 个问题。用户可以轻松跟踪运动。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

scrollIntoView 在所有浏览器中都有效吗? 的相关文章

  • 如何格式化 Highcharts 的 (x,y) 对数据的日期时间

    我的序列化方法会产生如下所示的日期时间字符串 2014 07 09T12 30 41Z 为什么下面的代码不起作用 function container highcharts xAxis type datetime series data x
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 使用 dc.js 按条形值对条形图中的条形进行排序(排序)

    如何通过维度的计算值而不是维度本身的名称对 dc js 示例中的 x 轴 维度 进行排序 例如 请考虑序数条形图的 dc js 示例 https github com dc js dc js blob master web examples
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • Jquery一键提交多个同名表单

    我有动态创建的循环表单 我需要一键提交所有表单 我正在遵循下面的代码 你能建议我怎么做吗 谢谢
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 日期出现奇怪的错误,“未捕获非法访问”

    所以我试图找到最新的DateJavascript 可以处理 我把它减少到 9 月 275760 并增加了我开始捕获未捕获的天数illegal access例外new Date 09 24 275760 to new Date 10 13 2
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • 循环内的异步性

    我正在使用 jQuery getJSON 用于从一组实用程序的给定 URL 检索数据的 API 我真的很想找到一种为每个实用程序重用代码 完全相同 的方法 由于循环的执行与 ajax 调用无关 因此我无法找到保留循环值的方法 我知道这个描述
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • 如何创建 resx 文件

    我正在尝试在 Windows 窗体应用程序中使用图标 我读到您可以使用 resx 文件来执行此操作 我还读到 resx 文件可用于本地化 但这不是这个问题的重点 我或多或少知道如何use一个 resx 文件 如果我有的话 见下文 我不知道并
  • 配置 WCF 客户端绑定以在 dotnet core 2.2 中使用 X509 证书

    我正在尝试将旧的 WCF 客户端转换为 dotnet core 我成功地从 wsdl 生成了代理 并一直在尝试配置它们 以便我可以成功调用端点 根据一些谷歌搜索 似乎在 dotnet core 下我需要从代码配置我的 WCF 客户端 以下是
  • MsTest - 在程序集中的每个测试之前执行方法

    是否可以在程序集中的每次测试之前运行特定方法 我知道关于TestInitialize属性 但该属性具有 类范围 如果它是在 Test 类中定义的 它将在该类的每个测试之前执行 我想定义一个方法 该方法将在整个程序集中定义的每个测试之前执行
  • 如何在 OpenCV 中测试线条的接近度(霍夫变换)

    这是来自上一个问题 https stackoverflow com questions 1238085 我能够成功地使用 OpenCV Hough 变换来检测图片 扫描文本 中的线条 起初它会检测很多行 每行文本至少一行 但通过反复试验调整
  • 因果报应 vs 厚颜无耻

    我一直在试图找出在 Visual Studio 中编写 运行自动化茉莉花测试的最佳方法是什么 目前 我将 jasmine 与 Resharper 使用 PhantomJS 一起使用 并且可以从 Visual Studio 运行测试 现在我想
  • 用 javascript 或 jquery 替换现有的规范标签

    我想为 Adob e Muse 创建一个小部件 以替换 Muse 自动生成的规范标签 我知道这不适用于大多数机器人 因为它们在抓取页面时不运行任何脚本 但我读到 Google 的机器人在抓取时确实运行脚本 我发现了很多关于如何替换链接中的
  • R 中的调查包:如何设置 fpc 参数(有限总体校正)

    我使用与大小成比例的概率 PPS 计划从采样框架中采样了一些数据 这样我就采样了6两个变量组合的分层 gender and pre与比例 pre gender High Low Medium F 0 155 0 155 0 195 M 0
  • 如何使用jQuery删除样式属性下的宽度属性?

    div class views style width 421px height 15px TEST TEXT div 如何使用jQuery删除样式属性下的宽度属性 我知道removeAttr 宽度 但它在这里不起作用 因为 width 是
  • Mobile Safari:机身上的惯性滚动和最小的 UI 行为?

    这个问题需要一些解释 所以请耐心等待 与普遍看法相反 默认情况下 Mobile Safari 中的网页不启用惯性滚动 非常流畅的 60fps 滚动 由于它对用户体验产生了巨大的影响 在专门针对 iOS 进行 Modernizr 测试之后 我
  • 在 Spring Boot 1.4 中测试安全性

    我正在尝试测试 WebMvcTest与定义的自定义安全设置SecurityConfig class Configuration EnableWebSecurity public class SecurityConfig extends We
  • 如何在iOS中将UILabel的字体名称设置为HelveticaNeue Thin?

    我正在创建 UILabel 对于标签 我可以将字体名称设置为 HelveticaNeue Regular Light UltraLight 等 但我无法将字体名称设置为 HelveticaNeue Thin 它无法按预期工作 我喜欢 lab
  • ZoomExtents 方法调用的工作方式与通过手势激活 ZoomExtents 不同

    我一直在 MVVM 风格应用程序中开发一个小型 3D 预览窗口 创建视图 然后设置其数据上下文 因此 ZoomExtentsWhenLoaded True 似乎并不能帮助完成我需要的事情 我需要类似 ZoomExtentsWhenDataC
  • 如何使用ansible读取json文件

    我的 ansible 脚本所在的目录中有一个 json 文件 以下是json文件的内容 resources name package1 downloadURL path to file1 name package2 downloadURL
  • Apache Flink 如何处理倾斜数据?

    例如 我有一大堆单词 想统计每个单词的数量 问题是这些话是歪曲的 这意味着某些单词的频率会很高 但大多数其他单词的频率很低 在storm中 我们可以使用下面的方式来解决这个问题 首先对流进行随机分组 在每个节点中对窗口时间内本地的单词进行计
  • 为什么 JSF 2.2 在 Wildfly 上部分渲染 ajax 请求需要更多时间

    我正在努力将项目从 JSF 1 2 在 JBoss 4 2 3 上运行的 Richfaces 3 3 4 迁移到 JSF 2 2 在 Wildfly 8 1 0 上运行的 Richfaces 4 5 在部分迁移一些视图后 我发现使用 JSF
  • Objective C:Posing 可以在 ios 上使用吗?

    我正在尝试为一个 ios 项目实现摆姿势 场景 在运行时定义控制器类 https stackoverflow com questions 29424934 defining class of controller at run time 我
  • 如何将基于页面的 PHP 应用程序转换为 MVC?

    一段时间以来 我一直在努力解决如何使用 MVC 框架重新编码基于页面的 PHP 应用程序 仅作为背景 我必须将应用程序移至 MVC 因为我的老板正在让我这样做 不管怎样 我已经坐下来 打印出了目录结构 然后我开始尝试计划如何将这些页面转换为
  • 向 Keras 中 Flatten() 层的输出添加新功能

    我正在做图像分类 首先 我将图像输入 Keras 中的 CNN 模型 我想在 keras 中 Flatten 层的输出中添加新功能 然后将其输入到密集层 我该如何为其编写代码 基本上我对图像使用卷积 最后我想添加其他功能 例如年龄性别等 m
  • 如何使用lua打乱单词的字母

    我在 PHP 中使用了这个 str shuffle 函数 和梅卡this api https i stack imgur com papuI png我需要做同样的想法 将字母打乱 字母之间有空格 但使用 lua 对于使用电报机器人 我进行了
  • scrollIntoView 在所有浏览器中都有效吗?

    Does scrollIntoView 适用于所有浏览器 如果没有的话有没有jQuery选择 是的 但用户体验很差 正如 9bits 指出的那样 这长期以来一直是所有主流浏览器都支持 https developer mozilla org