Sobes.tech
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>, а кнопки всегда будут видны внизу контейнера.