程序员经验分享-hwhale

当 Angular 5 重新渲染一个大列表时，如何防止 chrome 滚动？

2023-12-20

我有一个角度组件，可以 ngFors 覆盖其他组件列表。我正在使用 ngx-dnd 库来启用拖放。每当子组件列表大于屏幕尺寸并且我使用谷歌浏览器时，拖放项目会导致页面向下滚动。如果我调试，我可以看到角度渲染导致创建一个新的项目集合，并且从 dom 中剔除旧集合，但是当在旧集合之上创建新集合时，屏幕滚动到将旧集合保留在屏幕上。当旧集合最终被删除时，屏幕会留在页面底部附近的某个位置。

如何防止 chrome 滚动以将旧 dom 保留在页面上？


这是由 Chrome 中一个相对较新的功能（称为滚动锚定）引起的。通常是为了防止广告和其他可能缓慢加载的内容干扰您浏览时的视图。

https://developers.google.com/web/updates/2016/04/scroll-anchoring https://developers.google.com/web/updates/2016/04/scroll-anchoring

要禁用它，请放置一个

style='overflow-anchor: none'

进入你的可滚动 div

https://css-tricks.com/almanac/properties/o/overflow-anchor/ https://css-tricks.com/almanac/properties/o/overflow-anchor/

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

angular

Googlechrome

当 Angular 5 重新渲染一个大列表时，如何防止 chrome 滚动？ 的相关文章

  • 如何使用 Angular CLI 添加应用程序范围的 CSS 文件？

    我想向我的 Angular 2 应用程序添加一些分片样式 例如字体和配色方案等将在任何地方使用的东西 过去 我总是通过在索引页面添加这样的标签来完成此操作 这不适用于 CLI 用于为应用程序提供服务的任何内容 我尝试在构建后手动将 css

  • Angular 2 在没有 @Input 或 @Output 的情况下监视组件属性的更改

    在 Angular 1 x 中 我可以使用 watch 来观看我想要的任何内容 但是在 Angular 2 中 我们有 ngOnChanges 它非常酷且高性能 但只能监视输入和输出装饰器 然而 有时我确实需要观察本地属性 以便在它们发生变

  • 如何在菜单中显示用户名

    我有一个 user name 我的 app component ts 中的变量 我想用它来显示用户登录后从本地存储获取的用户名 但这仅在应用程序启动时加载 我想在用户登录后重新加载它 当我在登录后关闭并重新打开应用程序时 它工作正常并显示用

  • 在 pre 标签内电子加载 html

    我最近创建了一个电子 角度应用程序 它在内部运行以下内容main ts win loadURL url format pathname path join dirname dist index html protocol file slas

  • Android Chrome 忽略 -webkit-text-size-adjust:none 属性。缩小时文本会缩放

    我们的客户请求一个网站 但不想支付移动版本的费用 我们仍在使其在移动设备上运行 当完全缩小时 Android 4 0 上的 Chrome 会缩放一堆文本 我们尝试设置 webkit text size adjust none 属性 但它似乎

  • 手动刷新 Angular 之前页面无法正常显示

    我面临着非常奇怪的问题 我的角度应用程序页面显示正确 它似乎没有完全加载 当我手动重新加载 刷新页面时 它的加载正常 这是完整的场景 我创建了一个登录页面 该页面显示完美并按预期工作 登录后 我导航到仪表板页面 该页面未正确显示 似乎加载了

  • Testaulous 无法启动 Chrome 浏览器

    当我在 浏览器 设置为 Firefox 的情况下运行 testaulous 时 会打开一个新的 Firefox 浏览器 我可以打开那里的控制台并查看我的 console log 消息等 当我在 浏览器 设置为 Chrome 或 Chrome

  • Angular 2 形式 + OnPush

    我正在编写一个 Angular 2 应用程序 出于性能原因 我尝试在任何地方使用 ChangeDetectionStrategy OnPush 我有一个复杂的组件 需要 OnPush 才能顺利工作 其中包含另一个显示表单的组件 使用 For

  • Chrome 中的 CSS 列不平衡

    我想使用以下方法在多列中动态显示一些 Bootstrap 列表组CSS 列 https developer mozilla org en US docs Web Guide CSS Using multi column layouts 但我

  • 如何在 Angular 2 Material Autocomplete 中获取所选项目的值

    我使用 Angular Material 创建了一个自动完成字段 并成功从 Web api 获取国家 地区列表 CountryID gt 项目值 或索引 国家 地区 gt 项目文本 当我尝试获取所选项目的值 而不是文本 时 它会按预期返回文

  • Angular 2打开静态页面

    我有 Angular 2 项目 我想在新窗口中打开服务器上可用的静态帮助文件 我试过window open help index html 它导航到该页面 但抛出有关找不到路线的错误 我也尝试在角度区域外运行上面的代码 但没有什么区别 我怀

  • Angular - 使用 routerlink 将对象传递给 @Input 参数

    我有一个带有 Input 参数的角度分量 如下所示 Component selector app transmission history export class TransmissionHistoryComponent implemen

  • 是否可以使用纯 css 禁用 mat-tab 动画

    我想禁用 Angular Material mat tab 动画 内容滑入到位时发生的动画 我知道可以使用 disabled 属性 但我想知道是否可以使用纯 css 达到相同的效果 EDIT 我们的用户体验团队希望从材质选项卡中删除幻灯片动

  • 将 Angular v12 升级到 v13 时出现“模块未找到”错误

    嗨 开发者和贡献者 我正在努力找出以下错误的问题所在 src app models type ModelType ts 2 0 44 错误 找不到模块 错误 导出字段无法解析目录 请求为 当我将 Angular 版本从 v12 升级到 v1

  • 模拟 ngrx/store

    这是关于 Angular 2 官方版本的 我知道单元测试在 beta RC 和正式版本之间发生了巨大的变化 当 ngrx store 用作构造函数中的参数时 在单元测试中模拟 ngrx store 的好方法是什么 这并不像嘲笑服务那么简单

  • html输入数字，min + step，使step忽略min？

    是否有可能使step忽略min属性

  • 使用 jQuery 选择焦点文本在 Safari 和 Chrome 中不起作用

    我有以下 jQuery 代码 类似于这个问题 https stackoverflow com questions 480735 在 Firefox 和 IE 中工作 但在 Chrome 和 Safari 中失败 没有错误 只是不起作用 有解

  • 如何按顺序使用 RxJS 可观察量？

    事情是这样的 我有一个 HTTP get 请求 它返回一个 JSON 对象列表 我使用 RxJS 订阅接收该列表的数据 现在 对于该列表中的每个对象 我想执行另一个 HTTP 请求 然后将该请求的结果放入数组中 到目前为止 我已经能够做到这

  • Chrome 和 IE 上的滚动/延迟事件

    我试图让用户始终看到一个内容块 即使他向下滚动页面也是如此 他还应该能够上下滚动内容块 这是一个精简版本的小提琴 向您展示我的意思 http jsfiddle net 9ehfV 2 http jsfiddle net 9ehfV 2 人们

  • 在 Chrome 中使用 animate.css 时出现全屏视频问题

    我有一个页面 其中包含使用视频标签的视频 另外 我的页面使用 animate css 向我的元素添加一些动画 问题是 当我在 animate css 中使用样式时 我的视频无法正确全屏显示 这是我的页面的示例 div div class g

随机推荐

  • XPTY0020：查找树的根：上下文项不是节点

    XSLT 中的这个错误让我难住了 XPTY0020 Finding root of tree the context item is not a node 我的 XSLT 指出错误所在 只是一个普通的旧变量声明

  • 内联 require() 在 requirejs 中工作，但不适用于优化的 almond 构建

    正如标题所示 我的内联 require 调用在非优化的 requirejs 运行中工作 但在使用 grunt 和 almondjs 构建时不起作用 Uncaught Error undefined missing views some vi

  • 为什么我要使用仅限制单一类型的 where 约束？

    所以我在这里查看 MSDN 示例 类型参数的约束 C 编程指南 http msdn microsoft com en us library d5x73970 28v vs 100 29 aspx第一个示例显示了以下泛型类 定义了where单

  • 使用 QPainter 在 Widget 之间画一条线

    我正在开发一个应用程序 我需要能够在两个之间画一条线QWidget对象 我已经尝试了很多事情 但我目前的尝试 我think方向正确 我只是觉得我错过了一些东西 就是拥有包含的小部件 我称之为DrawWidget并持有QGridLayout认

  • 为什么不能使用带有动态参数的匿名函数？

    今天刚遇到这个 匿名函数或方法组不能用作组成部分 动态绑定操作的值 当试图做的时候 static R ifNotNull

  • 如何使用 CodePipeline 删除 S3 中的文件

    我创建了一个 CodePipeline 它从 CodeCommit 存储库获取输入 文件 并将文件部署到 S3 存储桶 当我删除 CodeCommit 存储库中的文件时 管道不会删除相应 S3 存储桶中的文件 简而言之 我希望我的 S3 存

  • SingleChildScrollView“剪切”屏幕

    这是我正在开发的登录页面的屏幕 https ibb co X22g4rc https ibb co X22g4rc 当键盘出现时 它表明存在溢出 这似乎是正常的 https ibb co mzVLJ4f https ibb co mzVLJ

  • jQuery 无法识别 Symfony JSON？

    我正在尝试从 Symfony 获取 JSON 数据 但它似乎无法正常工作 下面是 symfony 代码片段 this gt getResponse gt setHttpHeader Content Type application json

  • 在 Spring Boot 应用程序中更改 autocommit=true 的优点和缺点？

    对我来说 自动提交似乎完全被 Spring Hibernate 配置覆盖 并且这个属性在这样的配置中绝对不起任何作用 但我想以某种方式确认这一点 Spring引导1 5 10 RELEASE版本 数据库是PostgreSQL 9 5 6 数

  • 计算 Python 列表中 True 布尔值的数量

    我有一个布尔值列表 True True False False False True 我正在寻找一种方法来计算数量True在列表中 所以在上面的例子中 我希望返回的是3 我已经找到了查找特定元素出现次数的示例 但是由于我正在使用布尔值 是否

  • 发送 Facebook 请求并获得礼物 FB API

    我已经按照文档在 facebook 上成功实现了我的应用程序的 发送请求 功能here http developers facebook com docs reference dialogs requests 现在 如果用户 A 接受用户

  • shlex.split() 和 re.split() 有什么区别？

    所以我用了shlex split 最近将命令拆分为参数subprocess Popen 功能 我记得很久以前我也用过re split 函数使用指定的特定分隔符分割字符串 有人能指出它们之间的本质区别是什么吗 每个功能最适合什么场景 shle

  • 使用 WMI 挂载网络驱动器

    尝试编写 WMI 类函数以使用登录计算机的凭据在任何计算机 远程或本地 上安装网络驱动器 这是我为服务台工作人员编写的一个较大项目的类 用于在远程 PC 上进行一线修复 技术人员输入机器名称或 IP 地址 应用程序会连接到它 并允许技术人员

  • Vbscript - 比较并复制文件夹中的文件（如果比目标文件新）

    我正在尝试设计这个脚本 该脚本应该用作很多用户的登录脚本的一部分 该脚本基本上应该采用源文件夹和目标文件夹 因为基本上只是确保目标文件夹具有与源文件夹完全相同的内容 但仅当源文件的修改日期标记比目标文件新时才进行复制 我一直在思考这个基本的

  • 具有内部构造函数的最小起订量具体类

    我正在尝试最小起订量一个具有内部构造函数的具体类 即MyAssembly I have public class MyClass internal MyClass other methods including factory instan

  • 如何获得资源路径？

    我想使用 RandomAccessFile 类来访问我的应用程序附带的文件 然而 该类只接受一个字符串 它是文件的路径 如果我将文件放置在资产目录之类的位置 如何构建该文件的路径 我知道我可以使用 getAssets 方法来读取资源 但这些

  • 如何在 php docker 容器上安装/启用 pdo-odbc 驱动程序？

    我目前在为我的 php 应用程序编写 Dockerfile 时遇到问题 我的 Dockerfile 可以工作 但缺少连接到 MS SQL Server 数据库所需的 pdo odbc 驱动程序 这是我当前的 Dockerfile FROM

  • 为什么我得到的 .csv 文件的 mime 类型为“application/octet-stream”？

    我正在开发一个必须将 Excel 文件导入 MySQL 的 PHP 应用程序 所以我需要将excel文件转换为 csv格式 但是当我想使用它来获取它的类型时 FILE something type 我得到application octet

  • 角度中的 HttpClient 模块出现错误

    node modules angular common http http d ts 81 22 中出现错误 错误 NG6002 出现在 AppModule 的 NgModule imports 中 但无法解析为 NgModule 类 这可

  • 当 Angular 5 重新渲染一个大列表时，如何防止 chrome 滚动？

    我有一个角度组件 可以 ngFors 覆盖其他组件列表 我正在使用 ngx dnd 库来启用拖放 每当子组件列表大于屏幕尺寸并且我使用谷歌浏览器时 拖放项目会导致页面向下滚动 如果我调试 我可以看到角度渲染导致创建一个新的项目集合 并且从

热门标签