监听 scroll 去改变位置的 element 会 lag, 当 scroll element 有背景颜色
在 chrome 测试, 需要打开 6 倍慢的速度才能看到 lag
原理我不知道为什么会 lag.
目前避开的方式是不要给 scroll element background-color
我也尝试用 will-change: scroll-position, 没效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin: 10px; } * { margin: 0; padding: 0; box-sizing: border-box; } .scrollContainer { width: 75px; border: 1px solid red; height: 200px; overflow: auto; background-color: gray; position: relative; /* will-change: scroll-position; */ } .wrapper { background-color: white; } .sticky { height: 20px; border: 1px solid red; } </style> </head> <body> <div class="scrollContainer"> <div class="wrapper"> <div class="sticky">c</div> <div style="height: 100vh;"></div> </div> </div> <script> const scrollContainer = document.querySelector('.scrollContainer'); const sticky = document.querySelector('.sticky'); scrollContainer.addEventListener('scroll', () => { console.log(scrollContainer.scrollTop); sticky.style.transform = `translate3d(0, ${scrollContainer.scrollTop}px,0)`; }); </script> </body> </html>
