为什么将背景附件设置为固定会改变背景的宽度行为? [英] Why does setting background-attachment to fixed change the width-behaviour of the background?
问题描述
我已经使用CSS和JS构建了类似Fluent-Design的滚动条(github repo ).滚动条通常可以正常工作，但是在为包含背景图像的元素(主体或任何子项)设置 background-attachment:fixed 时，它会中断:如果我通过将滚动条的宽度设置为部分透明来更改滚动条的宽度，透明区域会显示为白色(背景为主体颜色)，并且图像不会继续显示在滚动条后面；而且，如果我直接更改滚动条的宽度(源)，背景宽度会发生变化，而元素的宽度保持完全相同(=>元素在滚动条后面继续，但背景不会改变).
I've built a Fluent-Design like scrollbar with CSS and JS (github repo). The scrollbar normally works fine, but when setting the background-attachment: fixed for the element containing a background image (the body or any child) it breaks: If I change the scrollbars width by making it partially transparent, the transparent region is rendered white (the bodys background-color) and the image is not continued to be displayed behind the scrollbar; And if I change the scrollbars width directly (source) the backgrounds width changes while the elements width stays completely the same (=> the element is continuing behind the scrollbar, but its background is not).
这是我的意思的简短示例:
Here's a short example of what I mean:
(1)在没有后台附件的情况下可以正常工作:固定:
<script src="https://tim-greller.de/git/fluent/scrollbar/scrollbar.js"></script>
<link href="https://tim-greller.de/git/fluent/scrollbar/scrollbar.css" rel="stylesheet"/>
<body class="light" style="background: linear-gradient(50deg, #fde6a5, #fac1f8);">
<div id="content" style="height: 200vh">
content
</div>
</body>(2)现在固定了背景，在滚动条的透明部分后面仅显示白色:
(2) Now with the background fixed, which shows only white behind the transparent parts of the scrollbar:
<script src="https://tim-greller.de/git/fluent/scrollbar/scrollbar.js"></script>
<link href="https://tim-greller.de/git/fluent/scrollbar/scrollbar.css" rel="stylesheet"/>
<body class="light" style="
background: linear-gradient(50deg, #fde6a5, #fac1f8);
background-attachment: fixed;">
<div id="content" style="height: 200vh">
content
</div>
</body>使用https链接.
推荐答案
此问题似乎在当前的Chromium版本中已解决.
This issue seems to be fixed in the current Chromium versions.
这篇关于为什么将背景附件设置为固定会改变背景的宽度行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
