I want to be able to scroll the parent div, but have some kind of box in the center that shows the currently visible content relative to the scroll. theres probably a fancy term for it but it espaces me.
i saw a website that does something similar to this : https://www.heetch.com/ with the div that contains the phone being scrolled, only the content in the phone screen is being moved.
but im trying to do that without js, maybe with css perspectives ?
body
{
margin: 0;
}
.parent
{
width: 100vw;
height : 100vh;
background-color : "red";
display : grid;
justify-content: center;
justify-items: center;
align-items: center;
overflow-x: hidden;
overflow-y: auto;
}
.screen
{
border: solid 1px black;
width: 500px;
height: 300px;
position: sticky;
top: 50%;
transform: translateY(-50%);
z-index: 10;
box-shadow: 0px 0px 0px 2000px white;
}
.text
{
z-index: 4;
position: sticky;
width: 500px;
height: 300px;
}<html>
<body>
<div class="page">
<div class="parent">
<div style="margin-top: 500px;"></div>
<div class="screen"></div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt fugit rerum nostrum eius! Optio, alias obcaecati minus laborum, officia quas eius quisquam a, voluptates ratione porro labore rem sapiente adipisci velit. Nobis reprehenderit, eligendi accusantium provident asperiores rem maiores inventore rerum, impedit deleniti at minus commodi esse natus voluptas cupiditate, neque dolorem libero labore repudiandae sint eius blanditiis. Consectetur repudiandae accusantium ipsum at voluptatum eum. Repellat voluptate quo porro modi repellendus, dicta nam! Eligendi dolor porro officiis blanditiis dolore facilis eveniet dolorum, inventore aspernatur cumque nemo? Velit dolore, autem minus culpa aperiam deserunt dolorum quis sit vel at porro nostrum!</div>
<div style="margin-bottom: 500px;"></div>
</div>
</div>
</body>
</html>update 1 : after some tinkering around i figured out what they were doing, basicaly it is to have a box centered, have it have a z index superior to the text, and then somehow hide anything outside its border but without using overflow hidden, in my case im using box shadow.
its doing what i wanted, but i somehow dont feel like this hack im doing is the right thing to do.