Practical task: make a scroll inside the container (article), not on the body. Pin the buttons to the bottom of the container (sticky). Hide the scrollbar with styles.

To enable scrolling inside the <article> container rather than the entire page, you need to set a fixed height for the container and enable vertical scrolling. You can fix the buttons at the bottom of the container using position: sticky. To hide the scrollbar, apply styles for different browsers.

Example CSS and HTML:

<article class="scroll-container">
  <div class="content">
    <!-- long content -->
  </div>
  <div class="buttons">
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</article>

.scroll-container {
  height: 400px; /* fixed height */
  overflow-y: auto;
  position: relative;

  /* Hide scrollbar for Webkit */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}
.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.buttons {
  position: sticky;
  bottom: 0;
  background: white; /* so buttons are not covered by content */
  padding: 10px 0;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #ccc;
}

This approach allows scrolling the content inside <article>, while the buttons remain visible at the bottom of the container.