Плавный скролл с помощью CSS можно реализовать, используя свойство `scroll-behavior`, однако это касается только поведения при переходах по якорным ссылкам и не влияет на физическое движение скролла при прокрутке мышью.
Чтобы достичь эффекта плавного скролла при прокрутке мышью, можно использовать JavaScript. Ниже приведён пример, как это может быть реализовано:
### Пример с использованием JavaScript:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Плавный скролл</title>
<style>
body {
height: 2000px; /* Делаем страницу длинной для демонстрации скролла */
background: linear-gradient(to bottom, #ffefba, #ffd4aa);
}
</style>
</head>
<body>
<script>
document.addEventListener('wheel', (event) => {
event.preventDefault();
const scrollAmount = event.deltaY; // Получаем величину скролла
const currentScrollPos = window.scrollY; // Текущая позиция скролла
const newScrollPos = currentScrollPos + scrollAmount;
window.scrollTo({
top: newScrollPos,
behavior: 'smooth' // Плавное скролл-функция
});
});
</script>
</body>
</html>
```
### Объяснение:
1. **Событие 'wheel'**: Мы добавляем обработчик события для прокрутки мыши (событие `wheel`), с помощью которого можем получить величину прокрутки (`event.deltaY`).
2. **`preventDefault`**: Отменяем стандартное поведение скролла, чтобы полностью контролировать его.
3. **`scrollTo`**: Используем `window.scrollTo()` для плавного перемещения в новое положение. Свойство `behavior: 'smooth'` отвечает за эффект плавности.
Таким образом, вы получите эффект плавного скролла, реагируя на прокрутку мыши.
### Важно:
- Обратите внимание, что такие изменения в поведении скролла могут вызвать недовольство у пользователей, так как это может порой затруднять навигацию, особенно, если они привыкли к стандартному поведению. Убедитесь, что это действительно необходимо для вашего проекта.