问题
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) Working properly without background-attachment: fixed
:
<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) 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>
edit: using https links.
来源:https://stackoverflow.com/questions/63905430/why-does-setting-background-attachment-to-fixed-change-the-width-behaviour-of-th