Я работаю над приложением Angular, где у меня есть функция, которая прокручивает до определенного раздела страницы. Прокрутка работает нормально для разделов с 1 по 3, но по какой-то причине не прокручивается до раздела 4.
Изображение 1: Как оно должно себя вести
Если я перенесу раздел 4 выше на странице, прокрутка будет работать как положено. Кажется, проблема возникает только с последним разделом на странице.
Я знаю, что закрепить раздел 4 после панели навигации может быть сложно из-за ограниченного пространства внизу страницы. Однако внизу все еще достаточно места, так что это не должно быть причиной (как показано на прилагаемом изображении).
Изображение 2: Раздел 4 прокручивается сюда.
Изображение 3. Раздел 4 следует прокрутить сюда.
Эта проблема возникает только локально, и мне не удалось воспроизвести ее где-либо еще. Будем очень признательны за любые идеи или предложения о том, как решить эту проблему.
🤔 А знаете ли вы, что...
С JavaScript можно создавать интерактивные формы и проверять введенные пользователем данные.
В этом примере вы слишком усложняете прокрутку для просмотра.
Я знаю, что вы подняли множество вопросов и хотели бы придерживаться этого подхода. Но это неэффективно, поскольку при маршрутизации один и тот же компонент не должен отображаться снова и снова.
Сначала добавьте CSS плавной прокрутки в глобальные стили.
section {
padding-top: var(--nav-height);
}
html {
scroll-behavior: smooth;
}
Затем, чтобы включить прокрутку фрагмента, используйте приведенную ниже конфигурацию и передайте ее withInMemoryScrolling, что позволит использовать прокрутку.
const routerOptions: InMemoryScrollingOptions = {
scrollPositionRestoration: "enabled",
anchorScrolling: "enabled",
}
bootstrapApplication(App, {
providers: [provideAnimations(), provideRouter(routes, withInMemoryScrolling(routerOptions))],
}).catch((err) => console.error(err));
После этого нам просто нужно обновить навигационный компонент для навигации по фрагментам.
<nav>
<ul>
<li>
<a [routerLink] = "'.'" [fragment] = "'section-1'">Section 1</a>
</li>
<li>
<a [routerLink] = "'.'" [fragment] = "'section-2'">Section 2</a>
</li>
<li>
<a [routerLink] = "'.'" [fragment] = "'section-3'">Section 3</a>
</li>
<li>
<a [routerLink] = "'.'" [fragment] = "'section-4'">Section 4</a>
</li>
</ul>
</nav>
Вы можете избавиться от активированного кода маршрута и дополнительных маршрутов.
Это избавляет от многих сложностей. Ниже вы найдете репозиторий GitHub, где код работает нормально.