Содержимое Div смещается после задержки страницы

Question

У меня есть файл html, обслуживаемый Express, который также извлекает данные из api. Когда я нажимаю ссылку на панели навигации и переключаю маршруты (или страница перезагружается), верхняя панель навигации перемещается вправо, затем влево, и я не могу понять, как это исправить.

Если вы посмотрите на JSFiddle (ссылка ниже), вы заметите, что у меня есть ссылки на другие страницы, например /profile, /about, и c. Каждый раз, когда загружается одна из этих страниц, панель навигации смещается (происходит изменение вертикальной полосы прокрутки, которая исчезает, а затем появляется снова).

https://jsfiddle.net/h7bjyk63/5/

To mimi c вызов api, я добавил setTimeout. Чтобы воспроизвести проблему и понять, о чем я говорю, вам, вероятно, потребуется запустить этот код локально на вашем компьютере, а затем обновить sh страницу.

Странно то, что эта проблема возникает только когда есть какая-то задержка (например, вызов api или setTimeout). Если убрать задержку и сразу загрузить контент, все будет нормально.

Некоторые css коды закомментированы. Единственный ключевой элемент, который я хочу добавить позже, - это position: fixed, чтобы закрепить панель навигации в верхней части страницы.

Как предотвратить перемещение панели навигации?

Answer 1

Браузер сначала отображает страницу без полосы прокрутки, потому что это просто не обязательно. Затем вы динамически добавляете в DOM несколько длинных абзацев, в результате чего появляется полоса прокрутки. Это то, что вызывает "смещение" вашего контента.

Полоса прокрутки увеличивает ширину вашей страницы. Чтобы этого не произошло, необходимо сделать следующее:

html{
    overflow-y: scroll;
}

Answer 2

Я наконец нашел кое-что, что работало, хотя я не уверен на 100%, что это правильный способ делать что-то. Я просто изменил width в классе navbar--site-header на 100vw вместо 100%.

Ответ DVN-Anakin помог мне понять проблему (и одно возможное решение), а это ответ предоставил несколько дополнительных хороших решений.