0

Здравствуйте.

Есть маленький код, который устанавливает значение top у блока в зависимости от положения scroll'а. Проблема в том, что не во всех браузерах оно плавно отображается, т.е. при scroll'е происходят резкие скачки (браузера: IE, Opera <11 и т.д.). Как убрать эти скачки и сделать полностью плавные движения?

Код:

window.onscroll = function() {
	document.getElementsByTagName('div')[0].style.marginTop = window.pageYOffset + 'px';
};
body {height: 2000px; }
div {
  width: 200px;
  height: 200px;
  background-color: black;
}
<div></div>

Отображение со скачками:

введите сюда описание изображения

На картинке маленькие скачки, но с разными объектами и разными браузерами - скачки разного размера.

Ссылка на сторонний редактор: jsfiddle-gjx7ecd4

4
  • А нужно именно через margin?
    – SLy_huh
    Commented 2 февр. 2017 в 8:39
  • @SLy_huh, тут не важно. Оно и с position: absolute; top...px дёргается
    – Yuri
    Commented 2 февр. 2017 в 8:46
  • Ну в том плане, что поведение блока сильно похожа на fixed, с тем исключением, что он при полной прокрутке вверх, он маргинится на несколько пикселей. Мб, при скролле на 2+px ему просто класс присваивать с position: fixed; top:0;?
    – SLy_huh
    Commented 2 февр. 2017 в 8:47
  • @SLy_huh, можно. Но думал можно как-то скриптово убрать эти скоки-прыги. Добавьте свой вариант и я его приму :)
    – Yuri
    Commented 2 февр. 2017 в 9:04

2 ответа 2

2

Поведение блока сильно похоже на fixed, с тем исключением, что при полной прокрутке окна вверх, он маргинится на несколько пикселей. Возможно, решением будет - присвоение ему класса с необходимыми параметрами, если величина прокрутки окна больше его первоначального отступа.

var elem = document.getElementById('test'); //получаем целевой элемент
var style = elem.currentStyle || window.getComputedStyle(elem);/* тк, если
напрямую обратиться к свойству style,
то мы получим список правил для, непосредственно, ЭЛЕМЕНТА,
нам же нужен именно список правил, 
для таблицы стилей(первое выражение для IE)*/
var scrollOffset = style.marginTop;//Собственно, получаем начальный отступ из стилей
scrollOffset = scrollOffset.substr(0, scrollOffset.length-2)//убираем злосчастные `px`
window.onscroll = function() {
  if(window.pageYOffset > scrollOffset){
     elem.className = 'scrolled';
    return;
  }
  elem.className = '';
};
body {height: 2000px; padding: 0px; margin: 0px;}
div#test {
  width: 200px;
  height: 200px;
  background-color: black;
  margin-top: 7px;
}
.scrolled{
  position: fixed;
  margin-top: 0px !important;
  /*Свойства стилей для id перекрывают свойства для классов,
 посему так, но для новичков: это BAD PRACTICE!*/
  box-sizing: border-box;
  background-color: red !important;
  /*Просто, дабы понимать, что сейчас на нем висит класс*/
}
<div id='test'></div>

1

Никакими ухищрениями сделать плавный скролл через 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 или тут на странице тестового сайта.

10
  • Я конечно могу ошибаться, но фиддл ссылается на фиддл автора. А на тестовой странице скролл неистово "лагает", видимо из-за слишком большого времени ожидания.
    – SLy_huh
    Commented 2 февр. 2017 в 12:53
  • момент, спасибо. Исправил. Commented 2 февр. 2017 в 12:56
  • А теперь на тестовой странице, если для скролла пользоваться mmb, или pageUp/pageDown, или пробел, то событие не вызывается, квадрат стоит на месте.
    – SLy_huh
    Commented 2 февр. 2017 в 13:10
  • Как раз наоборот - квадрат при pageUp/pageDown улетает. Потому что мой код перехватывает только onWheel. Commented 2 февр. 2017 в 13:13
  • Ну, относительно body он стоит на месте, да, а относительно вьюпорта - движется. Но, как мне кажется, это не совсем то поведение, которое ожидает автор, при скроллинге страницы не колесом. Кроме того, на гифке - автор тянет страницу за ползунок на скролле, div при этом, остается зафиксированным сверху вьюпорта. В вашем варианте, он остается вверху body, а не вьюпорта.
    – SLy_huh
    Commented 2 февр. 2017 в 13:18

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.