Ошибка прокрутки Chrome?

Я борюсь со странным поведением Chrome, когда страница загружается, она прыгает в нижнюю часть страницы, а затем сразу же возвращается наверх.

Воспроизводимый в

  • Chrome 84.0.4147.135 (официальная сборка)
  • Хром 80.0.3987.162

Условия

  • В URL-адресе '#bottom' должен быть фрагмент, ссылающийся на элемент в самом низу страницы.
  • Javascript также попытается прокрутить страницу в самом низу, используя html.scrollTop.

Когда оба условия верны, возникает проблема. Страница прыгает вниз (там красный div - он мигает красным), а затем сразу же возвращается вверх (снова становится белым).

Когда есть только фрагмент '#bottom' без javascript или только javascript без фрагмента '#bottom', все работает как положено - страница красная, когда она прокручивается в самом низу. Только когда используются оба механизма, он не работает.

Ожидаемое поведение

  • Javscript scrollTop модификаций прыгает вниз - страница остается красной (работает)
  • Ссылка на фрагмент прыгает вниз - страница остается красной (работает)
  • И модификация scrollTop, и ссылка на фрагмент прыгают вниз - страница остается красной (не работает)

Текущее поведение:

  • Страница прыгает вниз — становится ненадолго красной — а затем снова прыгает вверх и остается белой

Примечание. Похоже, что Chrome просто восстанавливает исходную позицию прокрутки. Когда вы начинаете снизу и нажимаете CTRL+R, он остается внизу. Когда вы начинаете сверху и нажимаете CTRL + R, он остается сверху, а ненадолго прыгает в самый низ страницы.

Упрощенный код:

<!DOCTYPE html>
<html>
    <body>
    <!-- Just a button that makes sure there is '#bottom' fragment in URL, resets scrolling and reloads page -->
    <a href="javascript:location='#bottom';document.documentElement.scrollTop=0;location.reload();" style="position: fixed;">
            CLICK TO TEST
            <div><small>Keep clicking and if you see RED BACKGROUND FLASH you can reproduce the problem.</small></div>
    </a>

    <!-- Two big divs with distinct colors so we can see color flash when it jumps -->
    <div id="top" style="background: white; height: 10000px;"></div>
    <div style="height: 500vh; background-color: red;"></div>

    <!-- bottom target referenced by '#bottom' above -->
    <div id="bottom">BOTTOM ANCHOR</div>

    <script type="text/javascript">
            document.documentElement.scrollTop = document.documentElement.scrollHeight;
    </script>
    </body>
</html>

Я не мог использовать встроенный предварительный просмотр, потому что ему нужен URL-адрес с фрагментом. Вы можете временно просмотреть его в реальном времени здесь.

Изменить: наблюдение - вся проблема заключается в том, что Chrome пытается сохранить старую позицию scrollTop, несмотря на то, что Javascript меняет ее на новую.


javascript google-chrome html blink
person elixon    schedule 24.08.2020    source источник
comment
Я также могу воспроизвести в Firefox 80.   -  person D. Pardal    schedule 24.08.2020
comment
Я не мог воспроизвести это в FF, поэтому я подумал, что неправильно описал ожидаемое поведение. Если страница остается в конце КРАСНОЙ - все работает. Если он остается в конце БЕЛЫМ, то возникает проблема, которую я описываю. Извините за путаницу и спасибо за тестирование!   -  person elixon    schedule 24.08.2020

Ответы (1)


arrow_upward
1
arrow_downward

Это не ошибка. Что происходит:

  1. Страница прокручивается вниз из-за того, что JS устанавливает хэш URL-адреса.
  2. Страница прокручивается вверх из-за того, что JS устанавливает свойство scrollTop.
  3. Страница перезагружается (требуется некоторое время).
  4. Поскольку хэш по-прежнему #bottom, как только браузер находит элемент с идентификатором bottom, он прокручивается до него.

Я не знаю, как лучше всего это исправить, но, похоже, это работает:

javascript:location.hash='#bottom';document.documentElement.scrollTop=0;undefined;
person D. Pardal    schedule 24.08.2020
comment
объявление 1. вам не нужно нажимать, просто продолжайте нажимать CTRL+R; объявление 2. scrollTop фактически прыгает в самый низ (я добавил сообщения console.log(), чтобы проверить вашу консоль Javascript). Проблема в том, что и javscript, и хеш URL должны оказаться внизу. Когда я запускаю его как в Chrome, так и в Firefox, Chrome устанавливает белую страницу (неверно) и FF на красной странице (правильно). - person elixon; 24.08.2020
comment
Примечание: при нажатии CTRL+R вам нужно сначала прокрутить до самого верха. Кажется, что Chrome просто восстанавливает исходное положение при загрузке страницы, стирая любые изменения, внесенные в результате использования фрагмента URL или JS scrollTop. - person elixon; 24.08.2020