如何解决在手机上移动任务栏螺丝 CSS 背景渐变
我正在尝试创建一个当前具有线性渐变固定背景的页面,例如:
.content {
display: grid;
background: linear-gradient(to right,#3e5151,#decba4);
background-attachment: fixed;
min-height: 100vh;
}
因此,在桌面和移动设备上,这会填充视口,并且由于 background-attachment: fixed
属性而在滚动时不会改变。我的问题是,在移动设备上,大多数手机都有一个可伸缩的地址栏或类似的。在我的手机上,这个栏在底部,所以当我滚动时,这个栏会消失,即给我更多的高度。然而,这也意味着这个渐变背景需要重新渲染,直到我松开手指它才会这样做。结果是底部有一个白条,直到背景渐变被新的高度视口重新渲染。老实说,这看起来不太好。
有什么办法可以解决这个问题,以免发生这种情况,或者...?
解决方法
这是一个棘手的解决方案,因为 100vh
在滚动时会改变高度。相反,如果您像这样将其放在 body
元素上会怎样?
body {
display: grid;
background: linear-gradient(to right,#3e5151,#decba4);
background-attachment: fixed;
min-height: 100vh;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。