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

Implement a jQuery loading animation triggered by scrolling down the page

Embed the WordPress header file outside of the WordPress platform

Bar graph constructed using a pair of div elements

Why is the 3D CSS transform (translateZ) feature malfunctioning on Android 4.0.3?

Customize tab background color in Material-UI by utilizing a styledTab component with a passed prop

How can I show the configuration in Laravel?

The properties of the NextFont variable cannot be utilized in the CSS global scope when using the var() function

Resolved the z-index problem with the header and sidebar placement

Troubleshooting problem with CSS borders in Microsoft Edge Browser

Tables lacking borders where rowspans are present

Position two div elements side by side

What is the best way to arrange flex elements in distinct columns for stacking?

What is the best way to add a line break to a menu item?

Adding flair to a fresh element and then removing it upon its inception

Guide to choosing and unchoosing a div / button using angularJs

Adjust the border hue of the MUI disabled outline input

Our search box is showing suggested results but we are unable to access the specific product sku. What steps can we take to resolve this issue?

Place CSS elements in relation to the underlying element

Intersection of content in panel-body using bootstrap tab pills

Leveraging LESS variables within media queries