首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法在angular cdk-virtual-scroll中禁用滚动?

在Angular中,CDK(Component Dev Kit)提供了一种名为cdk-virtual-scroll的虚拟滚动机制,它可以提高大型列表的性能。如果你想禁用滚动,可以通过以下方法实现:

  1. 在组件中引入ScrollDispatcherCdkVirtualScrollViewport
代码语言:txt
复制
import { ScrollDispatcher, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
  1. 在组件的构造函数中注入ScrollDispatcher
代码语言:txt
复制
constructor(private scrollDispatcher: ScrollDispatcher) { }
  1. 在需要禁用滚动的地方,调用scrollDispatcherdisable方法,并传入CdkVirtualScrollViewport实例:
代码语言:txt
复制
ngOnInit() {
  const virtualScrollRef = this.scrollDispatcher.getScrollContainers()[0];
  this.scrollDispatcher.disable(virtualScrollRef);
}

通过以上步骤,你可以禁用cdk-virtual-scroll中的滚动功能。

关于CDK的更多信息,你可以参考腾讯云的相关产品:Angular CDK

请注意,本回答中没有提及云计算品牌商,如有需要,请自行搜索相关信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

记录工作遇到的各种问题(Bug,总结,记录)

12. iOS高版本微信内访问网页,音频背景音乐无法自动播放 其实在高版本浏览器,基于安全措施,已经不允许自动播放音频了,但在微信内是可以的 微信安卓环境下正常,但在高版本的iOS下就失效了,解决办法微信的...中性能面板汇总可以看到,键盘按下和松开的时候,会触发Angular的keypress和keyup事件,每个耗时几百毫秒 解决办法就是对不需要绑定的数据,尽量不用Angular自建的绑定,换成普通方式就好...(如JQ的绑定) 目前Angular还比较滥用JQ,以后得多注意 关于Angular的性能优化也有很多需要去慢慢了解,比如 speeding-up-angular-js-with-simple-optimizations...Angular.js(1)的ng-repeat过滤空的数据, 讨论 中看到有好几种写法 ?...某些情况下,页面滚动到底部(有滚动条),点击select,input, textarea等相关项时,会自动滚动到页面顶部 chrome60还是正常的,一升级就出现问题了 目前还不知道为何,可能是chrome61

18.1K12

【技术圈】Chrome 80 稳定版发布| Node.js 安全漏洞修复

新特性 支持与 sourcemap 进行交互的 API child_process 模块支持监听子进程的 uncaughtException 事件 ESM 模块添加多个 hook,并支持 conditional... Firefox 73 ,其引入了“可读性背板”解决方案,该解决方案文本和背景图像之间放置了一块背景色。现在,高对比度模式下的网站在不禁用背景图片的情况下更具可读性。...Angular的9.0.0版本已发布!这是涵盖整个平台的主要版本,包括框架,Angular Material和CLI。...加载页面后,浏览器将突出显示文本并将其滚动到视图中。...例如我们谷歌搜索某个关键词的时候,搜索结果中会有一些包含该关键词的段落描述,但是用户点击之后会进入该页面,而想要找到包含这个关键词的段落又需要使用 "Ctrl+F" 快捷方式来进行定位。

1.4K10
  • Angular2 脏检查过程

    本文中我将会深入讨论Angular 2 的变更检测系统。 高层次概览 一个Angular 2 应用就是一颗组件树。 Angular 2 应用是一个反馈系统,变更检测是它的核心。...,我们没办法精确地知道到底是哪个属性被改了---译者注。)。...我们采用比较激进的方式使用不可变对象,那么大多数时间里面,变更检测树里面大块地方都会处于禁用状态。 这一机制是如何实现的并不重要。你只要把变更检测策略设置为OnPush就可以了。...这样一来,我们就可以变更检测树里面跳过这个组件的子树,直到发生这样的事件为止。触发事件之后,我们可以对这颗子树进行单次检测,然后立即禁用直到发生下次变更。...最后,检测过程的某个不确定的地方,视图会被更新。这种系统非常难以debug。 如上面的例子所示,Angular 2 里面使用可观察对象不会出现这种问题。

    2.7K80

    【总结】1823- 移动端滚动穿透与滚动溢出解决方案

    滚动穿透 问题描述 移动端 WEB 开发的时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动条时, fixed 定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起滚动,看起来好像事件穿透到下面的...问题原因 能够猜想是文档(document)的滚动事件被触发了,如果能禁用滚动事件就好办了。...于是 popup 元素上设置该属性,禁用元素(及其不可滚动的后代)上的所有手势就可以解决该问题了。...大意是说, touchstart 和 touchmove 事件调用 preventDefault 方法可以阻止任何关联事件的默认行为,包括鼠标事件和滚动。 因此我们可以这样处理。...Step 1、监听弹窗最外层元素(popup)的 touchmove 事件并阻止默认行为来禁用所有滚动(包括弹窗内部的滚动元素)。

    56711

    Angular 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

    manualChangeDetection 函数可以用来禁用单元测试的自动更改检测,使开发人员可以更精细地控制更改检测。...版本 11 我们更新了 CLI,允许开发人员使用 ng serve 启动应用程序时启用 HMR。...输入表单的数据以及滚动位置都会保持原样,从而提高了开发人员的工作效率。 更快的构建 通过对一些关键领域所做的更新,我们带来了更快的开发和构建周期。...我们一直密切合作,确保 Angular 开发人员顺利过渡到受支持的 linting 栈。 我们版本 11 弃用了 TSLint 和 Codelyzer。...这意味着将来的版本,linting Angular 项目的默认实现会不可用。

    3.3K30

    记几处原生JS的开发 原

    控制台先测试好,直接使用就行了,但遇到以下问题,简单记一下: 0、项目引用了prism.js来加亮代码。高亮后,IE11非常的卡,无法滚动,按F12查看性能,要2秒多去渲染一屏,这和JS无关了。...先想肯定是阴影或变形引起的吧,就把css的shadow去掉,还不行。就一块块的去CSS代码。把透明度去掉,就好了!...2、IE11主界面,获取了iframe初始的contentWindow后,  如果再往里写入一个新页面,那么这个已经获取的window就无效了。...解决办法:window.scrollY || window.pageYOffset || document.documentElement.scrollTop 4、IE11里访问iframe时,document.getElementById...chrome,ff, 可不是这样,我还没有去百度原因,不知道有没有什么说法没有。 解决办法:统一用document.getElementById("frm") 5、动画编写。

    2.1K20

    2023 年前端大事记

    以前,我们可能会使用 setTimeout 来预估滚动可能在一定时间后完成,但这可能导致回调函数滚动过程滚动结束一段时间后触发,用户体验不佳。...scrollend 事件会在以下情况触发:浏览器动画结束或滚动完成、用户的触摸被释放、用户的鼠标释放了滚动键、用户的按键被释放、滚动到片段完成、滚动捕捉完成、scrollTo() 完成、用户滚动了可视视口...以前,我们原生的 CSS 每个选择器都需要明确地声明,互相独立。...同时禁用了有风险的方式。...Angular 团队为 Angular 官方文档开发了一个全新的主页:angular.dev。设计了一个全新的结构、提供了全新的指南、改进了内容质量。 引入了新的块模板语法。

    36710

    2019 年 11 个受欢迎的 JavaScript 动画库!

    这个库提供了canvas、 svg、CSS3D 和 WebGL渲染器,让我们设备和浏览器之间创建丰富的交互体验。该库于2010年4月首次推出,目前仍有近1000名贡献者开发。...GSAP 是一个JavaScript库,用于创建高性能、零依赖、跨浏览器动画,据称超过400万个网站上使用。GSAP是灵活的,可以与React、Vue、Angular和vanilla JS协同工作。...拥有15K的star和零依赖,这个库为 web 和移动浏览器提供了简单的滚动动画,以动画的方式显示滚动的内容。它支持多种简洁的效果类型,甚至允许你使用自然语言定义动画。...超过20k的star,Hover提供了CSS3支持的悬停效果集合,可应用于链接、按钮、徽标、SVG、特色图像等,CSS、Sass和LESS可用。...你还可以页面上放置 HTML div 并从中读取以允许搜索引擎和禁用JavaScript的用户访问,由Slack和其他人使用,这个库既流行又非常有用。

    2.4K20

    Angularui-grid的使用详解

    Angularui-grid的使用   项目开发的过程,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。...为了让用户浏览更爽,产品经理提出,当表格上下滚动时,表头固定,左右滚动时,表头随动。就这样一个看似十分easy的需求,我研究了一周时间,终于给实现了。   ...由于我们的项目用的是angular 开发的,项目中引入bootstrap-table和其它的文件冲突了,所以就放弃了。...@3.1.0 注:angularangular-touch、angular-animate三个文件版本需保持一致,angular-ui-grid要根据angular的版本进行确定,angular-ui-grid...注意引入文件的先后顺序   文件依赖关系  Angular-touch --> angular     Angular-animate --> angular     ui-grid --> angular

    2.1K20

    AngularDart Material Design 输入 顶

    请改用angular2 forms API disabled bool  是否禁用此输入(只读输入) displayBottomPanel bool  是否显示错误,提示文本和字符计数器面板...如果为false,则在文本输入框时标签会消失。如果为真,则它会“漂浮”输入之上。 hintText String  要在输入上显示的提示。...如果没有文本框输入任何内容,则显示默认文本。当用户输入文本时,它会消失。...请改用angular2 forms API disabled bool  是否禁用此输入(只读输入) displayBottomPanel bool  是否显示错误,提示文本和字符计数器面板...将此设置为true会更改行为,以便在更改选项或选项时:       1.选择的第一个选定值选项中有效       2.如果选择没有选定值,则选项没有任何活动 inputText String

    5.3K40

    前端插件以及部分细分网址梳理

    程序 regulex: 用于生成 正则表达式 的可视化流程图 markdown-it: 新型 Markdown 解析器,快速,支持插件 multiline: 用于 Javascript 的多行文本,类似于...,兼容到 IE8 scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等),性能很好 ScrollMagic: 神奇的滚动交互效果插件,可以滚动的过程设置各种各样的动态效果 infinite-scroll...: 滚动加载,滚动到最下到自动加载, Paul Irish 大神之作 animatable: 仅仅依靠 border-width 和 background-position 实现的各种动态效果,看真相...Fluidbox: 页面上内嵌图片的放大缩小效果,类似于 Medium 的效果 jquery-validation: jQuery 的一个插件,用于校验 Form 表单 BigVideo.js: jQuery...插件,用于调试 Angular angularjs-style-guide: AngularJS 代码风格 ngReact: React 的 Angular 插件,可以 Angular 中使用 React

    5.7K90

    【兼容性】H5滚动穿透解决方案

    小东西快快学快快记,大知识按计划学,不拖延 滚动穿透相信大家平常开发的时候也经常遇到,网上也有很多解决办法 今天我就谈下我对 滚动穿透的理解 和 总结下我们大佬写的一个比较完美的解决方案 不废话,本文分为...,这样就可以避免页面的跳动,但是直接给 html 设置 absolute 风险太大,容易埋坑,不太建议大项目使用,小应用还是可以的,我需求的小活动页7就使用过这种方式 5禁用页面滚动 除了 css...监听回调更新了参数,如果你不加上这个参数,那么可能这样并不能禁用页面滚动 具体如下 以前 addEventlisener 参数 是 target.addEventListener(type, listener...这个问题测试了,只 ios 存在,滚动穿透的顺序是 子->父->document,而 安卓和 鸿蒙 则不会,子滚不了,直接滚document 这个是实际的dom 父子关系才会,视觉上的 父子关系没有这个问题...只会绑定一个滚动对象,不会切换响应对象 只是开始滚动的时候,浏览器会根据情况,选择响应滚动的对象,选择时候不会切换

    5.9K20

    关于项目中是否使用Typescript的疑惑与解答

    有没有什么办法能让我快速知道「代码有bug没」 这是一个重要的问题:有没有什么办法能让我快速知道「代码有bug没」。 为了说明类型是如何解决这个问题的,我们先来介绍一种最简单的类型:正负数。...类型能让你「大概」知道代码对不对 TS 就是 JS 上加上类型声明,这样我们就能知道代码是否「大概」正确。 另外,这种方式速度非常快,快到你只要修改代码,TS 就能告诉你代码是否「大概」正确。...因为目前前端三大框架全都支持 TS 了: Angular 很早就支持 TypeScript 了,而且还把 JS 从自己的名字里去掉了:AngluarJS -> Angular。...甚至连 Angular 入门文档里的例子都默认是 TS 版本的。用 JS 写 Angular 不是不可以,只是会显得很「奇怪」,明明有更好的 TS,为什么会有人用 JS。

    1.6K20

    记一次Layer管理遇到的Bug及其相关问题的探索

    , 所以会导致浏览器会绘制单独一层的Layer 那么课程里面有说的可以通过will-change 和 transform: translate 来告诉浏览器这里需要创建Layer(只是可选 , 浏览器一定情况会不创建...对啊 , 我已经通过下面这个来禁用了 *::-webkit-scrollbar{ display: none; } 这就是说明即便禁用滚动条还是会发生paint还有compsitie 虽然通过添加will-change...可以看到这里的滚动还是root的layer上面的 , 没有触发paint , 这就奇怪了~ 这个我的页面的paint是什么导致的捏? ?...未解问题1: transformBlink是只有composite的呀~那么会是什么原因 ? 等等 , 我还有其他页面带有滚动的 , 不过会把问题变得更加奇怪了 ?...border需要再div.name和big-notification再套一层div , 这里就很好的体现有view model的好处了......唉 ---- ------2017/8/8更新, 找到更好的解决办法

    50220

    受够了!这糟糕的git commit记录

    有没有这么写过 commit 你是否再也无法忍受随意的风格?每次更新版本都不清楚更新了哪些功能?修复了哪些 bug?溯源的时候非常痛苦?不如试试国际知名项目angular.js的提交规范 ?...如果报错可切换到淘宝源 npm config set registry https://registry.npm.taobao.org 自动生成 conventional-changelog -p angular...构建过程或辅助工具的变动 footer 展开说明 以 BREAKING CHANGE 开头,后面是变更的具体描述,表示不兼容变更 BREAKING CHANGE: 配置文件全部提取到配置中心,仅保留配置...也白搭 如果是自建服务器可以通过修改--bare下的 hooks 文件来操作,但开源代码无法这样操作,.git 目录也不能提交,husky的方案,可以下载代码后通过node运行时更新hooks文件 我没办法给中心所有项目提出这样的规范...,也没办法规定每个人都安装 node,规范下自己还是可以做到的 小结 npm config set registry https://registry.npm.taobao.org npm install

    91430

    记一次Layer管理遇到的Bug及其相关问题的探索

    , 所以会导致浏览器会绘制单独一层的Layer 那么课程里面有说的可以通过will-change 和 transform: translate 来告诉浏览器这里需要创建Layer(只是可选 , 浏览器一定情况会不创建...对啊 , 我已经通过下面这个来禁用了 *::-webkit-scrollbar{ display: none; } 这就是说明即便禁用滚动条还是会发生paint还有compsitie 虽然通过添加will-change...可以看到这里的滚动还是root的layer上面的 , 没有触发paint , 这就奇怪了~ 这个我的页面的paint是什么导致的捏? ?...未解问题1: transformBlink是只有composite的呀~那么会是什么原因 ? 等等 , 我还有其他页面带有滚动的 , 不过会把问题变得更加奇怪了 ?...border需要再div.name和big-notification再套一层div , 这里就很好的体现有view model的好处了......唉 ------2017/8/8更新, 找到更好的解决办法

    746100

    控制页面的滚动:自定义下拉到刷新和溢出效果

    前言 通过阅读本文,你可以通过css overcroll-behavior属性值的设置,处理浏览器溢出滚动,以及禁用移动设备上刷新,下拉滚动时的发光和橡皮圈回弹效果,当然也可以看到css Houndini...使用该案例包括禁用移动设备上的“拉动到刷新”功能,消除过度滚动发光和橡皮筋效果,并防止页面内容模态/叠加层下滚动 背景 滚动边界和滚动链接 滚动是与页面交互的最基本的方式之一,但是由于浏览器的诡异默认行为...这些变通办法滚动性能方面具有良好记录的负面影响 引入overscroll行为 overscroll-behavior属性是一个新的CSS功能,用于控制当你过度滚动容器(包括页面本身)时发生的情况。...聊天框开始的滚动不会传播出去 ? (聊天窗口下的内容也会滚动) 页面重叠场景 下面”方案的另一个变动就是是当你看到内容固定位置叠加后滚动时。一个死的样品overscroll行为是为了!...示例 - 带和不带过度滚动行为的模态:包含 ? ? (左边之前:页面内容叠加层下滚动,右边之后:页面内容不会在叠加层下滚动) 禁用拉到刷新 关闭pull-to-refresh操作是一行CSS。

    3.4K20
    领券