1

Есть у меня сайт, в котором некоторые блоки подгружаются аяксом. Блок может быть подгружен, когда находится выше края страницы и, как следствие, невидим для пользователя. При этом после подгрузки блок может изменить свою высоту. Если высота увеличится, то все блоки ниже его, очевидно, съедут вниз на столько, на сколько изменилась высота. Пример ниже демонстрирует такое поведение.

var b1 = document.getElementById('b1');
var b2 = document.getElementById('b2');

b1.onclick = function() {
    b2.scrollIntoView();
};

b2.onclick = function() {
    var div = document.createElement('div');
    div.style.height = '100px';
    b1.parentNode.insertBefore(div, b1);
    b2.textContent += ' - OK';
    b2.onclick = null;
    b2.disabled = true;
};
<button id="b1">Нажмите, чтобы прокрутить вниз</button>
<div style="height: 700px;"></div>
<em>Эта надпись не должна быть видна</em><br/>
<button id="b2">Нажмите, чтобы изменить высоту вверху страницы</button>
<div style="height: 500px;"></div>

Так вот, если запускать это в хроме, то он сохраняет положение прокрутки относительно видимых элементов (то есть автоматически прокручивает страницу немного вниз), и нажатая кнопка (с надписью «OK») остаётся в том же месте на экране, где и была перед нажатием:

https://i.stack.imgur.com/vgarp.gif

Однако фаерфокс такого не делает, страница не прокручивается, в результате чего кнопка визуально съезжает вниз на столько, на сколько изменилась высота страницы над кнопкой:

https://i.stack.imgur.com/WZ6Wo.gif

1) Есть ли какое-нибудь нормальное название данному поведению? Задокументированно ли оно где-нибудь у обоих браузеров или в каком-нибудь стандарте?

2) Можно ли управлять этим поведением? Реально ли включить автопрокрутку под видимые элементы в фаерфоксе или выключить в хроме?

3) Если ответ на 2 вопрос отрицательный, это означает, что мне надо ловить событие изменения высоты блока и юзать window.scrollBy(0, изменениеВысоты) в фаерфоксе для имитации поведения хрома. Но тогда, естественно, всё сломается в самом хроме. Как мне добиться поведения как в хроме максимально кроссбраузерно (Safari/IE/Edge/Opera/UC Browser/что там ещё есть, везде ещё не проверял), желательно менее костыльно, чем парсинг юзерагента?

1 ответ 1

0

Firefox с версии 66 стал вести себя аналогично хрому, так что проблема со временем решилась сама собой.

Эта штука называется Scroll Anchoring, и самый первый черновик спецификации появился, похоже, в 2016 году.

Управлять этим поведением можно с помощью CSS-свойства overflow-anchor.

overflow-anchor: auto (значение по умолчанию):

var b1 = document.getElementById('b1');
var b2 = document.getElementById('b2');

b1.onclick = function() {
    b2.scrollIntoView();
};

b2.onclick = function() {
    var div = document.createElement('div');
    div.style.height = '100px';
    b1.parentNode.insertBefore(div, b1);
    b2.textContent += ' - OK';
    b2.onclick = null;
    b2.disabled = true;
};
.anchoring {
  overflow-anchor: auto;
}
<div class="anchoring">
<button id="b1">Нажмите, чтобы прокрутить вниз</button>
<div style="height: 700px;"></div>
<em>Эта надпись не должна быть видна из-за overflow-anchor: auto</em><br/>
<button id="b2">Нажмите, чтобы изменить высоту вверху страницы</button>
<div style="height: 500px;"></div>
</div>

overflow-anchor: none:

var b1 = document.getElementById('b1');
var b2 = document.getElementById('b2');

b1.onclick = function() {
    b2.scrollIntoView();
};

b2.onclick = function() {
    var div = document.createElement('div');
    div.style.height = '100px';
    b1.parentNode.insertBefore(div, b1);
    b2.textContent += ' - OK';
    b2.onclick = null;
    b2.disabled = true;
};
.anchoring {
  overflow-anchor: none;
}
<div class="anchoring">
<button id="b1">Нажмите, чтобы прокрутить вниз</button>
<div style="height: 700px;"></div>
<em>Эта надпись должна быть видна из-за overflow-ahchor: none</em><br/>
<button id="b2">Нажмите, чтобы изменить высоту вверху страницы</button>
<div style="height: 500px;"></div>
</div>

Ваш ответ

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

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