- 综合排序
- 最热优先
- 最新优先
- 来自专栏掘金安东尼
用 Houdini Paint API 打造动态UI元素
/ 定义工作 registerPaint('scroll-based-background', class { static get inputProperties() { return ['--scroll-position ']; } paint(ctx, size, properties) { const scrollPosition = properties.get('--scroll-position' scrollPosition来改变背景 // ... } }); CSS 调用： body { background-paint: scroll-based-background; --scroll-position : 0; } 用 JavaScript 来根据滚动位置更新 --scroll-position： window.addEventListener('scroll', () => { document.body.style.setProperty ('--scroll-position', window.scrollY); }); 再比如，来绘制一个圆形： // 首先，检测浏览器是否支持Paint API if ('paintWorklet' in
64320编辑于 2023-11-20 - 来自专栏鱼头的Web海洋
谈谈will-change这个性能优化的利器
this.style.willChange = 'auto'; } 语法说明 Formal syntax: auto | <animateable-feature># <animateable-feature> = scroll-position | contents | <custom-ident> will-change: auto will-change: scroll-position will-change: contents will-change scroll-position 表示开发者将要改变元素的滚动位置。 例如，浏览器通常仅呈现可滚动元素“滚动窗口”中的内容。而某些内容超过该窗口。
1.6K20发布于 2021-01-18 - 来自专栏IT杂症
css中的will-change
will-change: auto will-change: scroll-position will-change: contents will-change: transform //
59220发布于 2021-11-08 - 来自专栏杰的记事本
will-change提高动画性能与页面滚动性能
MDN上显示该属性语法如下： /* 关键字值 */ will-change: auto; will-change: scroll-position; will-change: contents; will-change scroll-position 告诉浏览器，我要开始翻滚了。 contents 告诉浏览器，内容要动画或变化了。 <custom-ident> 顾名思意，自定义的识别。 同时不能是以下这些关键字值：unset, initial, inherit, will-change, auto, scroll-position, 或 contents.
1.1K20发布于 2019-09-04 - 来自专栏Web前端开发
CSS3过渡与动画
默认写在前面的时间为duration */ will-change 增强页面渲染性能，提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置 will-change: auto / scroll-position / contents / <custom-ident> / <animateable-feature>; /*参数说明 auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化 scroll-position
1.2K20发布于 2019-08-23 - 来自专栏前端开发
React虚拟列表在移动端的优化方法有哪些？
隔离列表项的渲染范围，提升浏览器优化能力/* 列表容器优化 */.virtual-list-container { contain: strict; /* 告诉浏览器此区域独立渲染 */ will-change: scroll-position
32710编辑于 2025-08-14 微信小程序隐藏滚动条多种方法教程
webkit-transform: translateZ(0);}/* 优化滚动性能 */scroll-view { -webkit-overflow-scrolling: touch; will-change: scroll-position
78510编辑于 2025-11-21React虚拟列表在移动端的优化方法与实现指南
Pura70.ProAI代码解释/* 列表容器优化 */.virtual-list-container { contain: strict; /* 告诉浏览器此区域独立渲染 */ will-change: scroll-position
58610编辑于 2025-08-15- 来自专栏QQ音乐前端团队专栏
制作60fps的高性能动画
will-change 接收各种各样的属性值，比如一个或多个 CSS 属性 ( transform, opacity)、 contents 或者 scroll-position。
3.1K40发布于 2018-09-25 - 来自专栏腾讯IMWeb前端团队
5个你可能不知道的CSS属性
scroll-position表示，顾名思义，您希望在不久的将来随时更改元素的滚动位置。 一些位于在可滚动的元素中的内容需要未来在滚动视窗内可见的时候，该值可用于提示浏览器准备渲染内容。
1.4K20编辑于 2022-06-29 - 来自专栏京程一灯
5个你可能不知道的CSS属性
scroll-position表示，顾名思义，您希望在不久的将来随时更改元素的滚动位置。 该值可用于提示浏览器准备渲染内容,而不是可滚动元素上的滚动窗口中可见的内容。
1.3K20发布于 2019-03-28 - 来自专栏前端F2E
vite入如何引入Tailwindcss
max-content', fit: 'fit-content', }), willChange: { auto: 'auto', scroll: 'scroll-position
2.7K20编辑于 2022-08-19 - 来自专栏Coco的专栏
【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
使用方法示例：(具体每个取值的意义，去翻翻文档) will-change: auto will-change: scroll-position will-change: contents will-change
3K70发布于 2018-05-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号