I've been trying to implement a Figma design where the element's initial position is mid-screen height. When scrolling, the elements move up and remain visible unless out of screen view as below.

The only thing I could successfully implement is the normal scrolling where any overflow beyond the container is hidden

<div >
   This box has a height and a width. If too much content is displayed 
   within the assigned height, there will be an overflow situation. If overflow is set to 
   hidden then any overflow will not be visible.
</div>

.box {
  margin-top: 50vh; /* or top: 50vh; */
  width: 200px;
  height: 100px;
  overflow: scroll;
}

Is this implementation possible?

CodePudding user response：

I think you want padding top of some amount of vh unit.

https://css-tricks.com/fun-viewport-units/

See below:

html,
body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  height: 100vh;
}

.scroller {
  padding-top: 50vh;
  height: 100vh;
  overflow: auto;
  box-sizing: border-box;
}

<div >

  <div >
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
  </div>
  <div >
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
  </div>
  <div >
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
  </div>

</div>