Прокрутите до позиции привязки, учитывая фиксированный заголовок, при новой навигации по URL с хешем

Question

Демонстрация: https://6vk5zm231k.codesandbox.io/

У меня есть приложение базового реагирования с фиксированным заголовком 100px и несколькими ссылками, которые прокручиваются до соответствующих разделов привязки.Я использую «response-scroll», который работает, как и ожидалось, поскольку у него есть реквизит «offest».

Проблема заключается в начальной загрузке страницы, если я перемещаюсь с хешем в URL (https://6vk5zm231k.codesandbox.io/#home, https://6vk5zm231k.codesandbox.io/#about, и т. Д.), Я прибыл в раздел без смещения, чтобы учесть высоту меню.Если щелкнуть ссылку в меню, это будет исправлено, поскольку response-scroll выполняет свою работу, но я не уверен, как справиться с начальной загрузкой страницы.

Answer 1

Это немного грязно, но вы можете принудительно прокрутить до нужного компонента при запуске componentDidMount (). Вот вилка вашего проекта с фиксированной прокруткой: https://codesandbox.io/s/1owj7yqm33