Как исправить в IE11, Edge задержку при событии scroll?
Всем привет. Есть следующая проблема. При событии scroll происходит будто небольшкая задержка при добавлении class, из-за чего происходит скачок элемента.В chrome подобного момента нет. Подскажите, пожалуйста, как решить данную задачу.
this.coords = this.shareButtons.getBoundingClientRect(); this.coordsTop = this.coords.top; window.addEventListener("scroll", this.initSticky, false); initSticky() { let wScroll = window.pageYOffset; if (wScroll > this.coordsTop) { this.shareButtons.classList.add('is-fixed'); } else { this.shareButtons.classList.remove('is-fixed'); } } |
В Chrome и IE11 ведет себя совершенно одинаково.
<style> .is-fixed { position:fixed; top:10px; left:200px; } button { position:relative; } </style> <div style="height:200px; width:300px;background-color:yellow"></div> <button>Button</button> <div style="height:200px; width:300px;background-color:green"></div> <script> var shareButtons = document.querySelector('button'); var coords = shareButtons.getBoundingClientRect(); var coordsTop = coords.top; window.addEventListener("scroll", initSticky, false); function initSticky() { let wScroll = window.pageYOffset; if (wScroll > coordsTop) { shareButtons.classList.add('is-fixed'); } else { shareButtons.classList.remove('is-fixed'); } } </script> |
s24344, проверять лень, но попробуй:
1. использовать не >, а >=; 2. округлить в меньшую сторону this.coords.top (т.к. rect зачастую дробный, а scroll всегда целый). |
Часовой пояс GMT +3, время: 16:16. |