是否可以让滚动边距顶部在 Safari 中工作?

2023-12-26

我在锚点上使用滚动边距顶部来为我的粘性标题添加空间,但 Safari 不支持它。

这些文档在这里 -https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin指出这个错误 -

滚动边距不适用于滚动到片段目标或scrollIntoView(),请参阅错误 189265。

备用名称 使用非标准名称:scroll-snap-margin

有什么办法可以解决这个错误吗?


这是迄今为止我发现的唯一适用于 Safari 和 Firefox 的解决方案...Safari 特定的选择器。这并不理想,因为在 Safari 元素中使用填充限制了您可以使用的样式,但它胜过我尝试过的所有其他方式。

.anchor { scroll-margin-top: 130px; }
.anchor::-webkit-full-page-media, .anchor:future, .anchor:root .safari_only { padding-top: 130px;}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否可以让滚动边距顶部在 Safari 中工作? 的相关文章

  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo
  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • 无法使用 BeautifulSoup4 (Python 3) 抓取特定表

    我想从 Ligue 1 足球网站上抓取一张表格 具体来说 该表包含有关卡片和裁判的信息 http www ligue1 com LFPStats stats arbitre competition D1 http www ligue1 co
  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • 将 XSL-FO 转换为 HTML

    我有一组用于 PDF 生成的 XSL FO 文档 我还需要将相同的输出数据 PDF 格式 导出为 HTML 文件 此外 我需要 HTML 具有与 PDF 类似的样式 有没有办法使用 C 将 XSL FO 转换为 XHTML NOTE 我知道
  • Bootstrap:如何将按钮组对齐在中心(垂直)

    在下面的代码中
  • VueJS 中数据无法正确显示

    我的 VueJS 代码有一个小问题 在 输出 压缩的 GS1 数字链接 URI 部分中 When there is no result it should have nothing display like this I have remo
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • -webkit-box-shadow 与 QtWebKit 模糊?

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用

随机推荐

  • Grails - 具有级联删除的同一类的多个belongsTo

    这是针对 Grails 用户的 我在 grails 用户邮件列表上询问过这个问题 但我想既然我已经为此奋斗了几天 我应该撒尽可能广的网 我在尝试建模两个人之间的关系时遇到一些困难 另一个对象 不同类型 中相同类型的对象引用 两个物体 作为我
  • Java虚拟机如何实现“happens-before”内存模型?

    Java 的内存模型基于 先于发生 关系 该关系强制执行规则 但也允许在缓存失效方面优化虚拟机的实现 例如以下情况 thread A private void method code before lock synchronized loc
  • 如何修复 Python Mechanize 中的编码?

    这是示例代码 from mechanize import Browser br Browser page br open http hunters tclans ru news php readmore 2 br form br forms
  • ASP MVC 3 中一个视图中的两个模型

    我有 2 个型号 public class Person public int PersonID get set public string PersonName get set public class Order public int
  • 从 GCP 设置文档运行“Hello Cloud Run with Python”时,日志中出现“[CRITICAL] WORKER TIMEOUT”

    继教程在这里 https codelabs developers google com codelabs cloud run hello python3我有以下2个文件 app py from flask import Flask requ
  • 如何根据其他列的条件用另一列的值填充列?

    假设我们在 pandas 中有一个数据框 如下所示 col1 col2 col3 col4 22 Nan 23 56 12 54 22 36 48 Nan 2 45 76 32 13 6 23 Nan 43 8 67 54 56 64 16
  • 如何在Vue中加载外部CSS

    我创建了一个Vue项目与Typescript具有类风格的组件 我需要包含一些外部 CSS 文件 例如来自Amazon S3 CSS 似乎没有加载 在网络部分我可以看到它 我建议你使用preprocessor Install SASS npm
  • 如何让 wpf 工具包数据网格在绑定到数据集时显示新行

    有没有办法获取wpf工具包DataGrid当绑定到 a 时显示新行DataSet 换句话说 我有一个DataGrid 我已经设置了它的ItemsSource to a DataTable 一切似乎都工作正常 除了我无法让网格显示我添加到的行
  • 使用 asynctask 加载图像时 Android 列表视图中的奇怪行为

    我希望任何人都可以帮助我解决我遇到的 ListView 问题 昨天我一直在用头撞铁墙 因为我不知道问题出在哪里 这本来不是我的项目 这使得它变得更加困难 我有一个列表视图 我想在其中加载联系人行 在每行的左侧 我想 下载 异步加载图像 为此
  • 在 OpenCV 3.0 中计算密集 SIFT 特征

    从 3 0 版本开始 DenseFeatureDetector 不再可用 有人可以告诉我如何在 OpenCV 3 0 中计算 Dense SIFT 特征吗 我在文档中找不到它 预先非常感谢您 您可以传递一个列表cv2 KeyPoints t
  • 为什么服务器端Javascript没有被广泛使用? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 拦截并过滤HTTP请求

    我想拦截 嗅探传入的 HTTP 请求并过滤 修改它们的内容 在它们到达应用程序之前 Fiddler 似乎有这个功能 但为了集成和可移植性 我宁愿有一些 Java C 库来做到这一点 例如 JPCAP 它拦截 IP 数据包 但是 如上所述 我
  • 如何在条件展开转场中传递数据?

    我尝试建立一个RSS阅读器 在 添加提要 页面上 如果我点击 添加 按钮 我希望检查提要是否已成功添加 如果添加了 则触发unwind segue 并返回主页 如果没有添加 则停留在当前页面 我知道我可以在 添加 按钮上构建 IBActio
  • 如何禁用 Tmux 中的键绑定

    使用 Tmux 和 Vim 有时很痛苦 对我来说 冲突之一是Control S 我在 Vim 中使用它来分割打开缓冲区 但是当使用 Tmux 时 嗯 Tmux 用它做了一些愚蠢的事情 我不明白其目的是什么 但基本上 当C s在 Tmux 中
  • PHP文件下载问题

    我目前在用户下载存储在我的服务器上的文件时遇到一些问题 我设置了代码 以便在用户点击下载按钮后自动下载文件 它适用于所有文件 但当大小超过 30 MB 时 就会出现问题 用户下载有限制吗 另外 我已经提供了示例代码 并且想知道是否有比使用
  • Python 3.4 中“强制转换”为 int

    我正在用 Python 3 4 编写一些简单的游戏 我对 Python 完全陌生 代码如下 def shapeAt self x y return self board y Board BoardWidth x 抛出错误 TypeError
  • 离子段仅在点击内容输入后改变

    我正在使用 ionicv2 和 Adob e Creative SDK 构建照片编辑应用程序 我已经成功实现了创意SDK C SDK 成功返回编辑文件的 url 后 我会推送包含段的页面以及文件 URL 问题出在第二页上 当我单击该段时 它
  • 使用 PHP-EWS 访问另一个邮箱日历事件

    在 PHP EWS 库中 https github com jamesiarmes php ews https github com jamesiarmes php ews 我可以使用以下代码访问特定用户的日历事件 https github
  • 将编程语言嵌入到程序中[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 是否可以让滚动边距顶部在 Safari 中工作?

    我在锚点上使用滚动边距顶部来为我的粘性标题添加空间 但 Safari 不支持它 这些文档在这里 https developer mozilla org en US docs Web CSS scroll margin https devel