如何解决更改 background-position CSS 属性会导致回流吗?
为了实现一个简单的视差效果,我尝试了这个:
<html>
<script>
offsety = 500;
window.onscroll = function (e)
{
document.body.style.backgroundPosition = '0px -' + ((document.body.scrollTop / 3) + offsety) + 'px';
};
</script>
<body style="background-image: url(https://images-assets.nasa.gov/image/PIA24546/PIA24546~orig.jpg); background-attachment: fixed; background-position: 0px -500px">
<div id="content" style="margin: 50px; background-color: white; border: 5px solid #000; padding: 15px; opacity: 0.75">
...
</div>
</body>
</html>
据我所知,这不会导致无休止的回流 - 对吗?或者使用绝对定位的 DIV 会更好,该 DIV 具有背景图像集,然后更改该 DIV 的 CSS top: 属性。
就目前而言,它看起来还不错,Chrome 和 Firefox 的性能都不错。使用 onscroll 事件并不理想 - 但它确实可以滚动。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。