本文介绍: 检查浏览器兼容性;检查是否指定了阈值;检查 Safari 的供应商前缀;检查祖先元素是否具有overflow属性集;检查height父属性是否未设置;检查父元素是否为 Flexbox。检查浏览器兼容性在检查其他问题之前,最好确保您使用的浏览器支持position: sticky.
sticky属性不生效:
检查浏览器兼容性;
检查是否指定了阈值;
检查 Safari 的供应商前缀;
检查祖先元素是否具有overflow属性集;
检查height父属性是否未设置;
检查父元素是否为 Flexbox。
检查浏览器兼容性
在检查其他问题之前,最好确保您使用的浏览器支持position: sticky.
1、检查是否已指定阈值
粘性元素需要指定一个阈值:
top:0
right:0
bottom:0
left:0
这几个属性必须写一个
例如:
.sticky {
position:stickty;
kop:0;
}
2、检查 Safari 的供应商前缀
确保为属性值添加供应商前缀以支持低于 13 的 Safari 版本,例如,如下所示:
.sticky {
position:-webkit-sticky;
position:sticky;
tokp:0;
}
3、检查祖先元素是否具有overflow属性集
如果粘性元素的任何父/祖先设置了以下任何属性overflow,
position: sticky将不起作用(除非您在溢出容器上指定高度):
overflow: hidden
overflow: scroll
overflow: auto
检查具有overflow属性集的父母的片段:
只需在浏览器的 Web 开发人员控制台中复制/粘贴以下代码片段,即可识别overflow属性设置为 以外的所有父元素visible:
let parent = document.querySelector('.sticky').parentElement;
while (parent) {
const hasOverflow = getComputedStyle(parent).overflow;
if (hasOverflow !== 'visible') {
console.log(hasOverflow, parent);
}
parent = parent.parentElement;
}
如何使用position: sticky该overflow属性?
通过在溢出容器上指定高度,您应该能够position: sticky在容器元素设置overflow属性的同时进行工作。
4、检查height父属性是否未设置
如果父元素没有设置 height,则粘性元素在滚动时将没有任何可粘附的区域。
发生这种情况是因为粘性元素旨在在容器的高度内粘附/滚动。
5、检查父元素是否是 Flexbox
如果粘性元素的父元素是弹性盒,则有两种情况需要检查:
粘性元素已align-self: auto设置(默认设置);
粘性元素已align-self: stretch设置。
如果粘性元素已align-self: auto设置:
在这种情况下, 的值align-self将计算为父项的align-items值。
因此,如果父级有align-items: normal(默认设置)或align-items: stretch设置,
则意味着粘性元素的高度将拉伸以填充整个可用空间。这将没有空间让粘性元素在父元素中滚动。
如果粘性元素已align-self: stretch设置:
在这种情况下,粘性元素会拉伸到父元素的高度,并且没有任何区域可以滚动。
如何使粘性元素在 Flexbox 中可滚动:
您可以简单地将属性的值设置align-self为align-self: flex-start。这会将粘性元素放在开头并且不会拉伸它。
原文地址:https://blog.csdn.net/qq_36262295/article/details/130087186
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_14693.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。