- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试优化我的网络应用程序的滚动。我有包含大量数据的数据表,滚动变得非常糟糕。我将 will-change: transform
添加到数据表中,但它破坏了我的 position: fixed
表头(我将它们固定为允许它们随视口(viewport)滚动) .元素根本不随视口(viewport)移动,它们只是停留在文档流中。
但我偶然发现,如果我改用 will-change:opacity
,我的固定 header 就可以了。有人可以解释这种行为吗?我还没有找到任何说明他们应该采取不同行动的文件。
这是一个代码笔,其中包含我正在谈论的示例。在值之间切换,并在蓝色 div 中滚动。 https://codepen.io/bkfarns/pen/aLYgrN
这也是笔的基本代码:
html:
<div class="container">
<div class="fixed">should be position: fixed</div>
<div class="too-tall">div that is too tall</div>
</div>
CSS:
.container {
margin-left: 100px;
background-color: blue;
width:400px;
height:300px;
overflow: auto;
will-change: transform;//changing this to opacity fixes the issue
}
.fixed {
background-color: grey;
position: fixed;
margin-left: 150px;
margin-top: 100px;
}
.too-tall {
background-color: red;
width: 90px;
height: 600px;
}
最佳答案
will-change
的全部要点是,当指定的属性提前更改时,浏览器必须应用所有可能的更改,从而减少更改本身所需的时间。实际上,这意味着通过指定 will-change:transform
可以使元素发生转换(尽管在视觉上它保持在同一位置),并且转换后的元素的后代不能根据 CSS Transforms spec 进行修复。 .不透明度没有这样的效果,所以 will-change:opacity
不会破坏固定定位。
另外,will-change
本身并没有任何“优化魔法”,它只是优化指定属性的变化。一些属性强制将元素添加到理论上可以由 GPU 更有效地处理的复合层,但如果此类元素太多,则可能会产生相反的效果。为了优化滚动,可能是 other strategies会更有效率。
关于javascript - 为什么 will-change :opacity treat fixed elements differently than will-change:transform in chrome?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46656617/
在C中,我想运行linux命令。即, int status; status=system("lftp ftp://192.168.1.1 -e "mget -E /2015/Date*/*Snap/*
在我的内核模块中,我有以下读取函数: static ssize_t sample_read(struct file *filp, char *buffer, size_t length, loff_t
我目前正在开展一个学校项目,它需要一些 JPA。我并不是这方面的专家,所以我想我可以向你们寻求一些帮助。 它是 NetBeans IDE 中的一个 Maven 项目,更具体地说是一个 Java Web
我有一张从扫描仪扫描的图像。图像的某个区域故意不包含任何内容(所以只有白色)。图像的其余部分包含需要分析的数据。这个纯白色区域(称为“引用区域”)应用于确定分析代码应将什么值视为“白色”。来自扫描仪的
假设w之前没有被定义,下面的JS代码给出了ReferenceError: w is not defined: w?.y; 而这段代码只是返回undefined: let w; w?.y; 为什么 ?.
我正在尝试从 Unity 编辑器中配置我的项目,以将所有警告消息视为错误,但我似乎找不到任何与此相关的文档。有没有办法为我的项目配置它?非常感谢! 最佳答案 在 ProjectFolder/Asset
我的目标是在文本中找到一个词。需要注意的是,我需要将撇号视为文本。 让我用一个例子来解释。假设我要在文本中查找单词 don:don't trust don。我需要匹配 don 而不是 don't。 我
就上下文而言,我最近发现了函数式编程,并试图将其合并到现有的 Web API 解决方案中。 到目前为止,我一直在阅读Functional Programming in C#我一直在尝试创建一个新的 C
编译以下C模块 static const int i = 1; void f (const int *i); int g (void) { f (&i); return i; } 在 x86_
我正在使用 gson 将 java 对象序列化为 json。 Gson gson = new GsonBuilder().serializeNulls().create(); 此构建器可以很好地处理空
在 Delphi 2009 中,您在哪里打开将警告视为错误的选项? 最佳答案 我发布这篇文章后不久就找到了答案!可能对其他人有用。 导航至“项目 -> 选项 -> Delphi 编译器 -> 提示和警
我目前正在开发一个 Makefile 项目,由于我使用的是 boost,所以在编译过程中我收到了大量警告,因此我不能只在整个构建中启用 -Werror。但是,我有一组日志记录宏,可以有效地为我包装 p
我正在使用 SVG 文本路径为封闭路径周围的单词设置动画。如何让动画将路径视为一个圆圈,并让文本从路径的末尾平滑过渡到开头?现在它完成绘制文本(剪切溢出),直到文本消失,然后通过在开头弹出单词重新开始
在 Visual Studio 中有一个选项告诉编译器将警告视为错误,我如何使用 Qt Creator 设置它(我使用 VS2008 作为编译器)。 最佳答案 对于两种编译器(VS 和 MinGW)使
clap crate 为 -h 选项实现了内置行为,但它似乎没有为 -? 做同样的事情。有没有办法告诉它这样做? 最佳答案 我在 clap repository 上开了一个问题.作者/主要贡献者已在那
在我的 Visual C++ 代码中,我想要 /WX - “将警告视为错误”。这让我处理每个警告,包括 C4996 - “X was declared deprecated” 我不想解决 - 我现在不
我们已经开始了一个新项目,但现有项目也有这个问题。问题是,当我们用警告级别 4 编译时,我们也想打开 '将所有警告视为错误' 我们目前无法执行此操作,因为生成的文件(特别是 reference.cs
此代码在所有主流浏览器中是否安全? var string = '123' alert(string[1] == '2') // should alert true 最佳答案 不,这不安全。 Inter
我正在使用以下(高度简化的)MSBuild 脚本: 这对于转换单个配置文件非常有效,而无需通过 MSDeploy。 但是,假设在我的
我正在使用 WDK 的 Build 实用程序构建打印机驱动程序。我需要关闭“将警告视为错误”。它在 Visual Studio 项目文件中被关闭,但这显然不会影响 Build。 有谁知道如何做到这一点
我是一名优秀的程序员,十分优秀!