Back to questions
Middle+
1
Практическое задание: сделать скролл внутри контейнера (article), а не на body. Кнопки прибить к низу контейнера (sticky). Скрыть scrollbar стилями.
Companies where asked
Tilda
Answer from AI
sobes.tech 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>, а кнопки всегда будут видны внизу контейнера.