Middle+
Exercice pratique : faire défiler à l'intérieur du conteneur (article), et non sur le body. Fixer les boutons en bas du conteneur (sticky). Cacher la barre de défilement avec des styles.
sobes.tech IA
Réponse de l'IA
Чтобы сделать скролл внутри контейнера <article>, а не на всей странице, нужно задать фиксированную высоту контейнеру и включить прокрутку по оси Y. Кнопки можно закрепить внизу контейнера с помощью position: sticky. Чтобы скрыть scrollbar, применим стили для разных браузеров.
Пример CSS и HTML:
<article class="scroll-container">
<div class="content">
<!-- длинный контент -->
</div>
<div class="buttons">
<button>Кнопка 1</button>
<button>Кнопка 2</button>
</div>
</article>
.scroll-container {
height: 400px; /* фиксированная высота */
overflow-y: auto;
position: relative;
/* Скрыть scrollbar для Webkit */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE и Edge */
}
.scroll-container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.buttons {
position: sticky;
bottom: 0;
background: white; /* чтобы кнопки не перекрывались контентом */
padding: 10px 0;
display: flex;
justify-content: space-around;
border-top: 1px solid #ccc;
}
Такой подход позволит прокручивать содержимое внутри <article>, а кнопки всегда будут видны внизу контейнера.