为什么在 Chrome 中定位:粘性不起作用?

2024-04-23

你怎么获得position: sticky在职的?

我在 Chrome 26.0.1410.43 m 中尝试了以下操作,但它不起作用:

thead {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 10px;
}

http://jsfiddle.net/8LRms/ http://jsfiddle.net/8LRms/

据此,它应该起作用:

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

似乎在Chrome 23.0.1247.0中支持,但现在在26.0.1410.43 m中不起作用。


在很短的一段时间内,Chrome 在标志后面启用了此功能,--enable-experimental-webkit-features,在他们的 about:flags 部分。然而,由于浏览器重新绘制的效率低下,它很快就被删除了。

As of 铬56 https://blog.chromium.org/2016/12/chrome-56-beta-not-secure-warning-web.html,此功能再次启用,无需标记。


从 Chrome 52.0.2743.116 开始,此功能由标志启用--enable-experimental-webkit-features再一次。


回答更新后的问题为什么它被删除:Google (Chromium) 删除了对position: sticky由于规范尚未完成,他们将同时关注其他滚动功能:

“我们最终希望实施立场:粘性,但是当前的 实施的设计方式没有与现有的很好地集成 滚动和合成系统。例如,position: Sticky 依赖于 updateLayerPositionsAfterDocumentScroll 可以正常运行,但是 函数没有其他目的,否则可以删除。相似地, 位置:粘性根本不适用于复合溢出滚动,这 现在是驱动引擎中滚动的默认机制。

一旦我们把滚动和合成房子整理好,我们就应该返回 定位:粘性和以良好集成的方式实现该功能 与发动机的其余部分。然而现在,这个 CL 删除了我们当前的 实现,以便我们可以专注于改进滚动的实现 我们已经发货的功能。”

强调我的。您可以阅读更多相关内容here https://code.google.com/p/chromium/issues/detail?id=231752#c28.

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

为什么在 Chrome 中定位:粘性不起作用? 的相关文章

  • ASP.NET - Google Chrome 缓存 DropDownList 选择

    我的购物车页面上的 Google Chrome 和 Safari 似乎遇到了缓存问题 购物车中有 2 个下拉列表 当您在更改下拉列表中的值后点击结帐按钮时 它会将列表中选择的内容提交到数据库 解释意外的行为有点困难 所以我会尝试一步一步地写
  • Mobile Safari (iPhone) CSS 垂直居中/行高 CSS 问题

    有一个问题 我一直试图在各个项目中解决 但运气不佳 我有一些divs 内的文本以 CSS 为中心 使用display block and line height 我也尝试过padding和固定的高度 通常 这些设置要么只是标题 要么有时是按
  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div
  • 无法从代码隐藏更改 CSSClass

    这一定是世界上最简单的事情 但它就是行不通 我有一个外部 div 我想对其应用一个类以使其显示样式 none 以便隐藏其中的所有内容 它实际上是一个 asp panel 元素 所以我假设我可以在后面的代码中设置 control CssCla
  • Img srcset 和尺寸属性

    我正在尝试制作一个简单的网站img标签 将使用新的srcset属性 主要思想是根据屏幕分辨率更改图像 src 工作示例 http pixelteam pl surprise some files index html 问题在于sizes 正
  • 手机上猫头鹰轮播的高度

    我有一个使用 Owl Carousel 覆盖桌面上整个屏幕的图像 当我在手机设备上查看相同的图像时 它仅占用屏幕尺寸的三分之一 我如何调整高度 使其比手机上当前的高度更高 我读过一些帖子 但作为猫头鹰旋转木马的新手 我不确定我是否做错了什么
  • 横向旋转到纵向时的字体大小怪异 - CSS 媒体查询 - iPhone5 Safari

    我已经用谷歌搜索了这个 但无法弄清楚 谢谢你的帮助 Studiolynch com 响应式和流体布局 在 iphone 5 Safari 中完美运行 除了从横向模式旋转到纵向模式会使字体大小小于应有的大小 但是 如果您最初以纵向模式加载页面
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g
  • Twitter Bootstrap - 多图像(缩略图)轮播 - 一次移动一个缩略图

    我正在尝试 Twitter bootstrap 3 我对 HTML CSS 和 Javascript 还很陌生 我有一个我创建的轮播 它的代码如下所示 div class container div class carousel slide
  • ReactJS 水平对齐material-ui 元素

    我试图在文本输入旁边有一个单选按钮 这样用户基本上可以输入问题的 答案 并标记一个首选答案 然而 Material UI 将每个都放在自己的行上 这就是我目前所拥有的 div div
  • 将 Chrome 扩展上的权限移至可选

    我了解到 Chrome 在添加新权限时会禁用扩展程序 当我向扩展添加新功能时 我需要在permissions列表 现在我知道我应该使用optional permissions 我的问题是 如果我将网站列表从permissions to op
  • 如何将 div (或任何元素)覆盖在表格行 (tr) 上?

    我想在恰好有多个列的表行 tr 标记 上覆盖一个 div 或任何可以使用的元素 我尝试了几种方法 似乎都不起作用 我在下面发布了我当前的代码 我确实得到了一个覆盖 但不是直接覆盖在该行上 我尝试将覆盖顶部设置为 div Bottom css
  • Chrome 中的错误或 CSS 错误? (隐藏可见性的锚点)

    在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq
  • css 字体 twitter 像关闭按钮一样,我错过了什么?

    twitter 有一个关闭按钮 它是单个字符 x 我需要类似的东西 但是在我检查之后 span x span 我按照 firebug 告诉我的那样创建 css 规则 close button font family Tahoma Arial
  • 将引导程序中的表单居中不起作用[重复]

    这个问题在这里已经有答案了 我试图将我的表单置于 div 中 但我使用的方法不起作用 我尝试使用引导文档中所述的 justify content center 属性 但它没有将其居中 当我尝试将其居中但应用时display flex and
  • Rails Active Admin css 与 Twitter Bootstrap css 冲突

    我对 Rails 资产管道有点陌生 所以我可能做错了什么 我正在尝试为我的后端使用 Active Admin 为我的前端应用程序使用 twitter bootstrap css 我将 bootstrap css 添加到 应用程序 资产 样式
  • Chrome 版本 58 的 Redactor 编辑器文本格式问题

    我们正在使用编辑器 https imperavi com redactor https imperavi com redactor 版本 10 1 1 并且由于对项目的大量依赖而未迁移到 Redactor II 最近 我们在 Chrome
  • 更改 CSS 网格中的列顺序

    我正在研究 CSS 网格 当我在桌面尺寸上查看它时 min width 769px 我有单行三列 像这样的事情 col 1 col 2 col 3 我可以使用 css grid 移动列 以便我可以在移动布局上执行类似以下操作吗 col 1
  • 背景大小:封面在视网膜显示屏上看起来像素化

    可以看到我正在开发的网站here http ourcityourstory com dev 如果你查看 iPad 3 或 iPhone 4 上的 关于 或 联系 部分 背景看起来全都是疯狂的像素化 我有background size set
  • IE9-11 检测变换样式:preserve-3d

    我为一个项目制作了一个 3d 类型的菜单 自然 IE 会引起问题 因为 IE10 即使 3d 变换工作 也不支持变换样式 preserve 3d 我尝试了解决方法 通过对 3d 菜单容器的每个子元素应用变换 但至少可以说 动画看起来很糟糕

随机推荐

  • 使用 Xamarin.iOS 获取 iOS Library 文件夹的正确方法是什么?

    这将获取我的 iOS 应用程序的文档根目录 Environment GetFolderPath Environment SpecialFolder MyDocuments 有没有类似的东西可以到达Library folder var doc
  • 静态属性未在 UI 中更新

    我花了最后一个小时试图在谷歌和 stackoverflow 中找到答案 我遵循了不同的意见和建议 但到目前为止没有任何效果 我当前的代码如下所示 public class GlobalManager ViewModelBase static
  • Oracle 中四舍五入到特定有效数字位数

    oracle 是否有舍入函数可以四舍五入到特定数量的有效数字 例如 将 1278 舍入到 1300 四舍五入到两位有效数字 Try ROUND x d FLOOR LOG 10 x 1 where d是有效位数 x是要四舍五入的值 Exam
  • /docker-entrypoint-initdb.d 文件夹中的脚本将被忽略

    我需要使用一些 SQL 命令配置 Postogres 但我放入 docker entrypoint initdb d 文件夹中的所有内容都不会被执行 我正在使用 postgres 9 6 图像 我的 Dockerfile 如下 FROM p
  • 包使用冲突:捆绑包启动时的导入包

    尝试安装 htmlunit 捆绑包时出现以下错误 com springsource com gargoylesoftware htmlunit 2 6 0 370 could not be resolved Reason Package u
  • 如何将本地不同的 Git 分支推送到 Heroku/master

    Heroku 的政策是忽略除 master 之外的所有分支 虽然我确信 Heroku 的设计者对这个政策有很好的理由 我猜测是为了存储和性能优化 但对我作为开发人员来说 结果是无论我正在研究什么本地主题分支 我都想要一种简单的方法将 Her
  • CakePHP 无法写入某些文件

    我开始使用 CakePHP 为我的框架开发一个网站 我实际上刚刚开始并且已经遇到了错误 我无法理解它们的含义 Warning cake core cache was unable to write cake dev en us to Fil
  • CSS加载后触发的jQuery事件?

    我的页面上有几个链接 在 div 允许您更改 CSS 样式表 theme selector a click function var path this attr href head link remove head append retu
  • 我可以使用 CALayer 来加速视图渲染吗?

    我正在制作一个自定义 NSView 对象 其中一些内容经常更改 而另一些内容则很少更改 事实证明 变化较少的部分需要花费最多的时间来绘制 我想做的是将这两个部分渲染在不同的层中 以便我可以分别更新其中一个或另一个 从而使我的用户免受缓慢的用
  • 未确定的泛型类型在 ghci 的运行时中如何表示

    我很清楚通用函数和通用数据类型 在泛型类型中 data SB forall x show x gt SB x instance Show SB where show SB x show x 所以对于任何给定类型x 如果它有一个签名Show
  • charindex() 最后计算白色字符,len() 在 T-SQL 中不计算

    我想找到最后一个的索引 性格 但问题是 LEFT target LEN target CHARINDEX REVERSE target 不起作用 因为目标列中的字符串末尾有很多空格字符 并且charindex函数包含空格 但是len没有 有
  • 如何对异步 API 进行单元测试?

    我已经安装了适用于 Mac 的 Google 工具箱 http code google com p google toolbox for mac 进入 Xcode 并按照说明设置单元测试发现here http code google com
  • Android NDK 链接问题

    我用 NDK 编译了 Sox 等 所以 我拥有所有 Android 友好的共享库 我制造了一个简单的测试文件 http pastebin com rniwQ7Gz它调用 sox 函数 NDK 构建告诉我 undefined referenc
  • 尝试以紧凑模式访问 UITextView 时 iMessage 扩展程序崩溃

    下面是我在 iMessage 应用程序中的完整代码 class MessagesViewController MSMessagesAppViewController IBOutlet weak var messageView UITextV
  • .net Web 应用程序中的异常处理

    我承认 我不关心太多的异常处理 我知道我应该做得更多 但我永远不知道从哪里开始和从哪里停止 我并不懒惰 离得很远 这是因为我对异常处理的矛盾心理感到过度紧张 即使是最小的应用程序中 似乎也有无数个地方可以应用异常处理 但它可能会让人感觉有点
  • Java 中对象序列化和压缩的性能成本

    应用程序不断接收名为Report并将对象放入Disruptor对于三个不同的消费者 在 Eclipse Memory Analysis 的帮助下 每个进程的 Retained Heap SizeReport对象平均为 20KB 该应用程序开
  • 使用 xslt 比较两个 xml 文件?

    我有 2 个 xml 文件 如何使用 xslt 比较两个文件是否相等 如果不等于意味着第二个 xml 中发生了更改 在 XPath 2 0 中你可以简单地使用fn deep equal http www w3 org TR 2005 CR
  • 检测用户何时点击 div 外部

    我正在向用户展示一个模式 灯箱 当用户单击按钮时 模式会显示 页面的其余部分会变暗 平常的东西 不过我想这样做 如果用户单击模式之外的任何元素 我希望模式消失并且页面恢复正常 如何才能做到这一点 我知道我可以为 body 设置一个 oncl
  • 分配不同价值对象的算法建议

    我有以下问题 给定 N 个对象 N 编辑 通过最公平的分配 我的意思是任何两个玩家获得的物体的价值之间的差异是最小的 另一个类似的情况是 我有N个不同价值的硬币 我需要将它们平均分配给M个玩家 有时他们并没有完全分开 我需要找到下一个最佳的
  • 为什么在 Chrome 中定位:粘性不起作用?

    你怎么获得position sticky在职的 我在 Chrome 26 0 1410 43 m 中尝试了以下操作 但它不起作用 thead position webkit sticky position moz sticky positi