Middle+
Esercizio pratico: fare lo scroll all'interno del contenitore (article), e non sul body. Fissare i pulsanti in fondo al contenitore (sticky). Nascondere la scrollbar con gli stili.
sobes.tech AI
Risposta dell'AI
Чтобы сделать скролл внутри контейнера <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>, а кнопки всегда будут видны внизу контейнера.