Display fixed or absolute elements within a scrollable container

Question

Display fixed or absolute elements within a scrollable container

I want to create a unique design with overlapping divs that can be selectively displayed through scrolling. While this effect is possible with images using background-attachment: fixed, I am seeking a solution that can work for any child element.

Here is an example of the desired effect with images:

.main {
      position: relative;
      height: 100vh;
      overflow-y: scroll;
    }

    .scroll-block {
      height: 100vh;
      width: 100vw;
      overflow: hidden;
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
    }

<html class="overflow-hidden">

<head>
  <link rel="stylesheet" href="/public/tailwind.css">
</head>

<body class="main">
  <div class="scroll-block" style="background-image: url(http://placekitten.com/500/500)">
  </div>
  <div class="scroll-block" style="background-image: url(http://placekitten.com/400/400)">
  </div>
  <div class="scroll-block" style="background-image: url(http://placekitten.com/300/300)">
  </div>
</body>

</html>

I attempted to use fixed/absolute divs inside the scrollable blocks while setting overflow: hidden, but the overflow property did not affect fixed/absolute divs. Is there a CSS way to achieve this?

css

Answer 1

Answer №1

Utilizing the CSS property <code>clip-path

can be beneficial in this scenario:

body {
  position: relative;
  height: 100vh;
  margin: 0;
  overflow-y: scroll;
}

.scroll-block {
  height: 100vh;
  clip-path: inset(0);
}

.scroll-block > *  {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align:center;
  padding:20px;
}

<body class="main">
  <div class="scroll-block">
    <div>
      <img src="http://placekitten.com/500/300">
      <h2>title1</h2>
    </div>
  </div>
  <div class="scroll-block">
    <div>
      <img src="http://placekitten.com/400/400">
      <h2>title 2</h2>
    </div>
  </div>
  <div class="scroll-block">
    <div>
      <img src="http://placekitten.com/300/300">
      <h2>title 2</h2>
    </div>
  </div>
</body>

Answer 2

Utilizing the CSS property <code>clip-path

can be beneficial in this scenario:

body {
  position: relative;
  height: 100vh;
  margin: 0;
  overflow-y: scroll;
}

.scroll-block {
  height: 100vh;
  clip-path: inset(0);
}

.scroll-block > *  {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align:center;
  padding:20px;
}

<body class="main">
  <div class="scroll-block">
    <div>
      <img src="http://placekitten.com/500/300">
      <h2>title1</h2>
    </div>
  </div>
  <div class="scroll-block">
    <div>
      <img src="http://placekitten.com/400/400">
      <h2>title 2</h2>
    </div>
  </div>
  <div class="scroll-block">
    <div>
      <img src="http://placekitten.com/300/300">
      <h2>title 2</h2>
    </div>
  </div>
</body>

Display fixed or absolute elements within a scrollable container

Answer №1

Similar questions

Is there a way for me to choose every element excluding those contained within a specific div?

Incorporating Cascading Style Sheets (CSS) to

Changing the display of elements using Javascript in IE6 by modifying class

Scroll automatically to the following div after a brief break

Start the CSS3 animation in reverse right away

Ensure that the CSS element pseudo-class does not override the styling of its child

Simplifying the process of implementing Jquery CSS Toggles

Horizontal centering using Bootstrap 4 media

Enhancing Tabulator tooltips with custom CSS styles

Styling the background of the endAdornment in a material-ui textfield using React

Incorporate a CSS class name with a TypeScript property in Angular version 7

Utilize the Bootstrap grid layout to create space for empty columns on the left-hand

Scrolling text blocks on mobile devices

Display a background color behind an <img> element when the image's dimensions are smaller than the page

Is it feasible to decrease the lateral margins of Bootstrap's container without the need for custom CSS? If so, what is the method?

The DataGrids effortlessly expanded to accommodate their parents without the need for a horizontal scrollbar, showcasing their full capacity

Is it possible to implement smooth scrolling in HTML without using anchor animation?

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

Tips on disregarding events within an html table

Preventing background style from taking precedence over backgroundColor style in React's inline styling