Middle+
Вазифаи амалӣ: дар дохили контейнер (article) скрол кунед, на дар body. Тугмаҳоро ба поёни контейнер (sticky) гузоред. Бари скролро бо услубҳо пинҳон кунед.
sobes.tech AI
Ҷавоб аз 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>, а кнопки всегда будут видны внизу контейнера.