Sobes.tech
Middle+

Πρακτική άσκηση: κάντε κύλιση μέσα στο κοντέινερ (article), και όχι στο σώμα. Κολλήστε τα κουμπιά στο κάτω μέρος του κοντέινερ (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>, а кнопки всегда будут видны внизу контейнера.