Как исправить в 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, время: 06:37. |