如何解决是否可以使Scroll-margin-top在Safari中工作?
我在锚点上使用scroll-margin-top来为我的粘性标头添加空间,但是Safari不支持。
此处的这些文档-https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin指出了此错误-
滚动边距不适用于片段目标或scrollIntoView()的滚动,请参见bug 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;}
我在使用 safari 时遇到了同样的问题,这是我的解决方案:
[id] {
scroll-margin-top: 3ex;
outline: 0 none;
@media screen and (-webkit-min-device-pixel-ratio:0) {
margin-top: -3ex;
padding-top: 3ex;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。