Question 305602 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I create a scrollable content inside a 100vh section that scrolls without scrolling the main section until the scrollable content is over

I want to recreate something like the about section of this amazing portfolio: https://www.david-hckh.com/

There in the about section the section appears to be 100vh and has a side content with about info that scrolls in the main scroll and when it is over then the section scrolls and continues with the rest of the sections.

I believe, but I’m not sure, that he is using ScrollControls from react three drei but with that wrapper we can’t have pages that have a height greater than 100vh so I want to implement something like what he did in my react app.

I tried setting the min-height to 100vh and for that specific section that is longer than 100vh create an overflow scroll but it doesn’t do anything.

Tags:

2

Answers


  1. 0

    vh can cause issues with address autohide in mobile browsers.You can use maybe dvh but some versions of browsers doesn’t support it.

    Link you shared is is heavily scroll controlled.You can maybe try same way too.

    • Body’s display is flex
    • canvas with/height is pixel determined by js. So you will need to get body height,with and store it on start. Don’t forget to refresh it on window.resize
    • Scrollable area is nested into with:100%,height:100% position:absolute overlay which covers whole page.
    • Scroll in that overlay is also controlled for soft scrolling. using css transform:translate(0px,scrollAmount), overflow:hidden. so has no native scrolling. You can maybe checkout "ScrollBooster" for this, if you would like to bypass headache or still try to use native scrolling too but you have to follow another strategy.

    i hope it helps

    Login or Signup to reply.
  2. 0

    Unless you really need all the extra bells and whistles of that site, the basic effect is actually easy to achieve with just CSS using position: sticky;. What you want is to have a section that scrolls naturally and is taller than the viewport, with some element that becomes "stuck" to the page while that section is in view. You have 3 elements:

    • A: A container
    • B: The content you want to scroll
    • C: The content you want to appear fixed

    In the example site you gave, A is the section, B is the stats/content on the left, and C is the background render of David.

    You want your container (A) to naturally be the height of the content (B), but no smaller than the viewport height:

    .container-class {
    position: relative; /* needs to be set for `position: sticky;` of child to work */
    min-height: 100vh;  /* or dvh/svh/lvh */
}

    For the "fixed" content (C), use sticky positioning and whatever other styles you need to place it correctly.

    .fixed-class {
    position: sticky;

    /* Needs to have at least a top or bottom value for sticky to work */
    top: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search