Middle+
Praktische opdracht: maak scroll binnen de container (article), en niet op de body. Zet de knoppen onderaan de container (sticky). Verberg de scrollbar met stijlen.
sobes.tech AI
Antwoord van 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>, а кнопки всегда будут видны внизу контейнера.