Прокрутка прыгает вверх и вниз при попытке сделать ее плавной ⇐ CSS

[Anonymous]

Я пытаюсь реализовать плавную прокрутку для всей страницы, но у меня возникла проблема, при которой прокрутка «подскакивает» вверх и вниз, а не движется плавно. Кажется, он непредсказуемо подпрыгивает, а не плавно, как ожидалось.
Что я сделал:
Я добавил поведение прокрутки: сглаживание мои глобальные стили с использованием стилевых компонентов.
Я установил overflow-y: прокрутку для моего основного контейнера, чтобы гарантировать, что прокрутка работает должным образом.
Я сделал это важным: прокрутка-поведение: плавная !important;
GlobalStyles.js:

Код: Выделить всё

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
/* Apply box-sizing to all elements for better layout control */
*, *::before, *::after {
box-sizing: border-box;
}

/* Ensure smooth scrolling across the entire page */
html {
scroll-behavior: smooth !important;
}

body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
}

/* Styles for the scroll container */
#container {
overflow-y: scroll;
}

/* Fixed positioning for the topTab with white text */
.topTab {
bottom: 0;
position: fixed;
font-size: 25px;
color: white;
}

/* Styling for page sections */
.pg {
font-size: 100px;
height: 100vh;
background-color: blue;
text-align: center;
}

/* Styling for links */
a {
color: white;
text-decoration: none;
}
`;

export default GlobalStyles;

Видео о проблеме прикреплено здесь: https://streamable.com/0ykmf5

Подробнее здесь: https://stackoverflow.com/questions/791 ... -be-smooth