Sobes.tech
Middle+

Praktische Aufgabe: Scroll innerhalb des Containers (article) und nicht auf dem Body. Buttons am unteren Rand des Containers fixieren (sticky). Scrollbar mit Styles verstecken.

sobes.tech KI

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