Никакими ухищрениями сделать плавный скролл через onscroll не получится. Проблема в том, что за время поворота колеса мыши вылетает 5-12 событий onwheel, которые трансформируются в onscroll. Ваш код пытается их переварить - и получаются скачки.
Событие scroll не всплывает, поэтому стандартный scroll невозможно отменить через preventDefault.
Возился с этой проблемой довольно долго. Пришлось перехватывать onWheel и анимировать плавно до нужного места. Анимацию делал на jQuery, здесь в рамках ответа на javascript анимацию не ставил - просто скроллинг окна и transfrom: translate
.
Важное замечание. Браузер по-разному обрабатывает top
и transform
, есть примеры в Сети, что transform
работает намного более плавно.
Приведенный ниже код перехватывает onWheel, накапливает события в течение 150мс, чтобы отследить полное единичное движение колеса, затем поднимает флажок animating
. Во время "анимации" скрипт не воспринимает более никакие новые события скролла, один раз прокручивает окно на полную ранее просуммированную величину скролла, изменяет положение черного квадрата через transform
и через 100мс сбрасывает флажок animating
.
Эти величины - 150 и 100мс - сугубо эмпирические и подгоняются под конкретную задачу, особенно в том случае, если скрипт осуществляет анимацию элемента.
// Так квадрат дергается
// window.onscroll = function() {
// document.getElementsByTagName('div')[0].style.transform = 'translateY(' + window.pageYOffset + 'px' + ')';
// return false;
// };
// А так - не дергается
var animating = false;
var timeoutID;
function onWheel(event) {
event = event || window.event;
var pos = event.deltaY || event.detail || event.wheelDelta;
console.log(pos);
if (animating) {
finalPos = finalPos + pos;
event.preventDefault();
return false;
}
if (pos > 0) {
// downscroll code
if (!animating) {
// Scroll
animating = true;
finalPos = pos;
event.preventDefault();
clearTimeout(timeoutID);
timeoutID = setTimeout(function() {
console.log('scroll to ' + finalPos);
window.scrollTo(window.scrollX, window.scrollY + finalPos);
document.getElementsByTagName('div')[0].style.transform = 'translateY(' + window.pageYOffset + 'px' + ')';
setTimeout(function() {
animating = false;
}, 100);
}, 150);
}
} else {
// upscroll code
if (!animating) {
// Scroll
animating = true;
finalPos = pos;
event.preventDefault();
clearTimeout(timeoutID);
timeoutID = setTimeout(function() {
console.log('scroll to ' + finalPos);
window.scrollTo(window.scrollX, window.scrollY + finalPos);
document.getElementsByTagName('div')[0].style.transform = 'translateY(' + window.pageYOffset + 'px' + ')';
setTimeout(function() {
animating = false;
}, 100);
}, 150);
}
}
}
if (window.addEventListener) {
if ('onwheel' in document) {
window.addEventListener("wheel", onWheel, {passive: false, capture: true}); // IE9+, FF17+, Ch31+
} else if ('onmousewheel' in document) {
window.addEventListener("mousewheel", onWheel); // устаревший вариант события
} else {
window.addEventListener("MozMousePixelScroll", onWheel); // Firefox < 17
}
} else {
window.attachEvent("onmousewheel", onWheel); // IE8-
}
Посмотреть работающий код можно тут в jsfiddle или тут на странице тестового сайта.
margin
?position: absolute; top...px
дёргаетсяfixed
, с тем исключением, что он при полной прокрутке вверх, он маргинится на несколько пикселей. Мб, при скролле на2+px
ему просто класс присваивать сposition: fixed; top:0;
?