Is there a way to implement a scrollable section within a 100vh container that scrolls independently from the main section until the end of the scrollable content is reached?

I'm inspired to create a similar about section on my portfolio website, drawing from the impressive design of

In the about section there, it appears to be 100vh with a side content displaying information that scrolls within the main scroll. Once the side content ends, the section continues scrolling with the rest of the page.

I suspect that ScrollControls from react-three-drei are being used for this effect, but I've encountered limitations when trying to implement it in my React app. When setting the min-height to 100vh and using overflow scroll for sections longer than that, I haven't been successful in replicating the functionality.

javascriptcssreactjsreact-three-fiberreact-three-drei

Answer №1

If you don't require all the fancy features of that website, achieving the basic effect can be simple with just CSS using position: sticky;. The goal is to have a section that scrolls naturally and exceeds the viewport height, with an element that remains "stuck" to the page while the section is in view. There are three key elements:

  • A: A container
  • B: The scrolling content
  • C: The fixed content

In the example site provided, A represents the section, B contains the stats/content on the left, and C showcases the background render of David.

The container (A) should naturally match the height of the content (B), but not shrink below the viewport height:

.container-class {
    position: relative; 
    min-height: 100vh;  
}

For the "fixed" content (C), utilize sticky positioning and additional styles as needed for proper placement.

.fixed-class {
    position: sticky;
    top: 0;
}

Answer №2

Issues may arise with address autohide on mobile browsers due to vh. One potential solution is to use dvh, although not all browser versions support it.

The shared link has heavy scroll control. You could experiment with implementing a similar approach.

  • The body's display is set to flex.
  • The canvas dimensions are determined by JavaScript using pixels. It's important to store the body's height and width on initialization and update them on window resize.
  • A scrollable area is nested within an absolutely positioned overlay that covers the entire page with dimensions of 100% width and height.
  • Scrolling within the overlay is controlled for smooth scrolling effect, utilizing CSS transform:translate(0px,scrollAmount) and overflow:hidden to disable native scrolling. Consider using "ScrollBooster" for this purpose or explore alternative strategies for enabling native scrolling.

I hope these suggestions prove helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Seeing the Bootstrap css load immediately upon the page loading and switching between pages

Upon loading my webpage or navigating between subpages, I've noticed that the Bootstrap.css styles are interfering with my CSS transitions. For some reason, my regular links appear orange initially, but they turn blue during loading or when transition ...

htmljquerycssbootstrap-5

Easily Update Your Div Content by Simply Clicking a Single Link/Button

I am in need of assistance here. My goal is to display dynamic content within a div. Below you will find the code I currently have: <script type="text/javascript"><!-- function AlterContentInContainer(id, content) { var container = documen ...

javascriptjqueryhtmlcss

Can I use leaflet to customize the types of roads displayed on the map?

Is there a way to customize the types of roads displayed at different zoom levels using data from the OSM highways list? I have checked the Leaflet documentation but couldn't find the answer. If you happen to come across it, please share the link. e ...

javascriptleafletopenstreetmap

Dominant Editing through ASP.Net Roles

Looking for guidance on how to effectively use knockout with asp.net membership roles in MVC 4. My goal is to incorporate an editable grid on the page based on whether the user is an administrator or a 'registered user'. I want to ensure that use ...

javascriptjqueryasp.net-mvcasp.net-mvc-4knockout.js

Autocomplete Dropdown failing to select default value when defaultValue option is set

stateNPAValue[formData.state.vale] = 0: "All",1: "959", 2: "203",3: "860", 4: "475" // API response for NPA data const [selectedNamesState, setSelectedNamesState] = useState([]); const transformedNpaData ...

javascriptreactjsmaterial-ui

What is the best way to create this specific layout using CSS?

Describing a layout with fixed lengths at the edges and a fluid main content container. I'm struggling to achieve it and can't figure out why. Check out my jsfiddle http://jsfiddle.net/JyXtR/3/ for reference. I aim to achieve this desired layou ...

csslayout

Node.js server continues running after attempting to stop with ctrl + C following starting the server using the command "npm start"

Whenever I initiate my server by typing node app.js in the command line on Git Bash, I can stop it simply by using ctrl + C. In my package.json file, I have configured a start script that allows me to use the command npm start to kickstart the server: "s ...

javascriptnode.jsnpm

Setting the height of both the body and html elements to 100% will result in the

Although this question has been previously asked, the solutions I came across are not effective. Here is the code in question: body, html { height: 100%; background-color: white; } body { margin: 0; padding: 0; } The issue I am facing is ...

htmlcss

Exploring the world of data manipulation in AngularJS

Seeking to comprehend the rationale behind it, I will share some general code snippets: 1) Fetching data from a JSON file using the "loadData" service: return { myData: function(){ return $http.get(path + "data.json"); } } 2) ...

javascriptangularjs

Exclude the use of ':any' in React component

Currently, I am new to React and facing a challenge in sending a variable and function to my component. I understand that using :any is not the best practice, so I am seeking a better solution. I am working on creating a modal and passing data to my compo ...

javascriptreactjstypescriptreact-propsreact-component

Ways to create a variable in a function that can adapt without being tied to a variable that changes

Apologies for the vague title, but I am uncertain of the correct term for my issue. I am working on dynamically generating a table of clickable elements using for loops in JavaScript. Each element, when clicked, should execute the same function but with di ...

javascript

Creating a high-quality video streaming system with ffmpeg: A step-by-step guide

As I work on developing a streaming app resembling YouTube, I encounter several challenges concerning the conversion of videos into various qualities. My main query is: Do I need to convert the original video file into multiple versions (e.g. 240p, 480p, ...

javascriptnode.jscffmpegffmpeg-php

Steps to show the chosen index value in an alert pop-up using Ionic 2 framework

I'm in the process of trying to showcase a selected index value within an Ionic 2 alert box. However, I'm struggling to find the correct method to display it in the Ionic prompt. This pertains to the home.ts import { Component } from '@ang ...

javascriptangulartypescriptionic2angular2-template

Using Three.js and WebGL to create transparent layers that conceal the planes positioned behind them

Have you ever noticed that in Three.js / WebGL, when you have two planes and one or both are transparent, the plane behind can be hidden by the transparent plane on top? Why does this happen? ...

javascriptthree.jswebgldepthzbuffer

Leveraging JavaScript to employ AJAX for communicating with a Spring controller

I'm having trouble accessing the controller's method var url = "UsersGroupReader"; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } req.onreadysta ...

javajavascriptajaxspringspring-mvc

unearth amplifyjs resource identity

I am currently working on implementing amplifyjs into my MVC4 application. The goal is to make a simple server call that returns JSON data. I was successful in setting this up in a separate sample project. Now, I am trying to integrate the same code into ...

javascriptjqueryamplifyjs

Center image and text horizontally within a div, with padding surrounding them

CSS Challenge <div id="container"> <img src="1.jpg" /> <span>text next to image</span> </div> Can you apply CSS to center the image and span within the div container, with a 5px padding between the image and spa ...

css

AngularJS: Encountering an unexpected identifier while trying to make a POST

I'm facing an issue with my http POST request in AngularJS. When I make the function call to $http, I receive a SyntaxError: Unexpected identifier. The unexpected identifier is pointing to the line url: 'rating-add' within my $http call. ‘ ...

javascriptangularjsdjango

Error: Webpack is unable to load PDF file: Module parsing unsuccessful. A suitable loader is required to manage this file format

I am relatively new to using webpack for my projects. Recently, I wanted to incorporate a feature that involved displaying PDFs. After some research, I came across the "react-pdf" library and decided to give it a try. While everything worked smoothly in a ...

javascriptpdfwebpacknext.js

Enhance the aesthetic appeal of the imported React component with added style

I need assistance with applying different styles to an imported 'notification' component within my header component. The notification component has its own CSS style, but I want to display it in the header component with unique styling. How can I ...

javascriptreactjstypescriptreact-nativereact-component