Navigate within a single component on the Stack by scrolling

I'm a huge fan of CSS!

Although it may seem like a simple task, I am completely stumped on how to tackle it.

Mission: My goal is to enable scrolling only within the List section without affecting the entire page.

Here's the structure of my page:

<Stack>
    <Box>Header</Box> // static height
    <Box>Content</Box> // dynamic height
    <List sx={{ overflow: 'auto', pb: '50px' }}> // dynamic height, need scroll only here
        <ListItemText>Lorem Ipsum #1</ListItemText>
             // ... more Lorem
        <ListItemText>LAST LAST</ListItemText>
    </List>
</Stack>
before scroll after scroll
https://i.stack.imgur.com/Ya7Y4.png https://i.stack.imgur.com/LeDpT.png
cssreactjsmaterial-ui

Answer №1

Due to the dynamic nature of the content height, targeting it with CSS poses a challenge. One approach is to convert your root container into a flex box, set its height to 100vh, apply flex: 1 to your content, fix the height: var(--header-height) for the header, specify fixed heights for the header and navbar, and use 

flex-shrink: 1; flex-basis: var(--minimum-list-height);
for the list. However, this setup may cause overflow issues when the content exceeds one page, pushing the list out if not contained, necessitating setting flex-grow: 0.

A more effective solution involves allowing the list to stretch to fill the screen as needed while keeping the content size in check. Initially, set fixed height on the list until the content grows, then adjust heights accordingly. Once again, utilize a flex box layout for the root container, establish fixed height for the header, apply 

flex: 1 0 var(--minimum-content-height)
to the content, and 
flex: 1 0 var(--minimum-list-height)
to the list to manage size discrepancies effectively. When the content surpasses a certain threshold, use scripting to maintain list height and restrict growth with flex-grow: 0.

The transition point where you switch height rules for the list occurs at:

content_height + header_height + (others including navbar) > viewport_height - minimum_allowed_list_height

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

Is there a way to incorporate a component into Particle.js?

I attempted to encase the Particle around the component but it's not functioning correctly import React from "react"; import { render } from "react-dom"; import Particles from "./Particles"; import "./index.css" ...

javascriptreactjsnpm

Setting maximum and minimum zoom limits for an element ID using JavaScript or jQuery

My application features a DIV element with the unique identifier of mainDiv. The issue I am facing is related to zooming functionality, as it currently lacks any set limits - both for scaling up and scaling down. I have been searching on Google for a sol ...

javascriptjqueryhtmlcss

What is the best way to shorten text in React/CSS or Material UI based on the line height multiples?

I'm facing an issue with creating a Material UI card that contains text. My goal is to set a fixed height for the card and truncate the text if it exceeds 3 lines. Can anyone suggest the best approach to achieve this? Here's the code snippet I&a ...

javascriptcssreactjsmaterial-ui

Tips on adjusting the width of a border

I'm facing a challenge with my select box setup: <select class="selectpicker" multiple data-live-search="true" name="color[]" title="Nothing selected yet"> <option class="" style="border-bottom:2px solid; border-color:red" value="">Red&l ...

htmlcss

Apply a chosen style to the element that was clicked on, while removing the style from the rest

Here is an example of my ul li structure: <div id="categoryTree"> <ul> <li id="cat_15"> <a class="hasSubCat" href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">N ...

javascriptjqueryhtmlcss

Axios GET request encounters Error 401 - Access Denied

In my current ReactJS project, I am utilizing axios to fetch data from MongoDB. Within this project, I have a login component that invokes a startLogin function. This function includes two axios requests: one POST request to send user data and another GET ...

reactjsapirestaxioshttp-status-code-401

How to resize and center an image within a div element as they both scale proportionally

Can someone help me figure out how to center a resized image within its container, which should also be centered? I've been struggling with this for 7 hours and can't seem to get it right. Any assistance would be greatly appreciated :-) Here is ...

jquerycsshtmlresize

Tips for adjusting the position of the second child in my navigation menu using CSS

Struggling with customizing my navigation menu in CSS, I'm seeking assistance. My goal is to have the second child element of the navigation menu on a new line instead of below the first child (refer to the image for clarification). An example of the ...

htmlcssmenunavigation

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Is there a way to achieve a gradient effect using pseudo-element :before on an image that can be customized by adjusting a slider input? I've been trying to implement this feature with the following code, but have not been successful so far. var ...

javascripthtmljquerycss

When the text in a Material UI Textfield is updated using setState in React, the Hinttext may overlap with the newly set

How can I fix the issue of default hintText and floatingLabelText overlapping with text in a textfield when using setState to autofill the textfield upon clicking on an edit button? Here is an image showing the textfield overlap: Below is the code for th ...

javascriptreactjsmaterial-ui

In Internet Explorer 11, React 15.4.1 does not support using objects as valid child components

When trying to render a collection of children in React, make sure to use an array instead of objects. If you encounter the error "Objects are not valid as a React child," consider wrapping the object using createFragment(object) from the React add-ons. Do ...

javascriptreactjsecmascript-6reduxinternet-explorer-11

Exploring the Date Picker Component in React.js

I am working on a reservation project in React Js and I need to implement a Date picker feature. The calendar view should display time with hours on the left side row and days of the week at the top (example image ). After searching, I have not been able ...

reactjsbootstrap-4react-bootstrapcalendarview

The jQuery UI Sortable functions are being triggered at lightning speed

I am currently working on a project where users can create a seating chart, add rows and tables, and move the tables between different rows. The functionality for adding rows and moving tables already exists in the code. However, I am facing an issue where ...

javascriptjqueryhtmlcssjquery-ui

JSX conditional rendering not behaving unexpectedly

Having difficulty with a conditional JSX statement causing an element to not display properly unless the window is resized. Please note that it works fine in development mode but does not show correctly after building. The goal is to show navigation links ...

javascriptreactjsjsx

Sass does not compile for optimization

My Sass compiler generated an overly large file for me, but it could be much smaller!! I checked the compiler settings and didn't find anything wrong! The issue might be with the compiler itself. It's also possible that there is a problem with my ...

csssass

CSS for a navigation menu with underlined links

I am attempting to create an underline effect when hovering over a link. However, I am facing an issue where the underline does not align perfectly with the line below it. Can someone please guide me on how to modify this CSS so that when the link is hov ...

htmlcss

Wordpress Issues with Displaying Arabic Text Correctly

The issue arises when displaying Arabic text in menus, both the top menu and main menu. The text appears distorted and unreadable, with characters like 2Ø®Ø§Ù†Ù‚Ø§Û showing up. However, in other areas of the page such as the body content, the ...

htmlcsswordpress

Get the maximum width in pixels through JavaScript when it is specified in different units within the CSS

I'm looking to retrieve the max-width value in px from CSS for use in a JavaScript code. The challenge is that this value might be specified in different units in the CSS file. Any suggestions on how to achieve this using JavaScript? const element = ...

javascripthtmlcss

How to update an Array<Object> State in ReactJS without causing mutation

In my program, I store an array of objects containing meta information. This is the format for each object. this.state.slotData [{ availability: boolean, id: number, car: { RegistrationNumber : string, ...

javascriptreactjstypescriptimmutability

Having trouble accessing object properties fetched via API, receiving the error message "TypeError: Cannot read property '' of undefined" in Next.js with JavaScript

Encountering a unique issue specific to NextJs. Fetching data from an API using a custom hook and receiving an array of objects as the result. Successfully logging the entire result (array of objects). const myMovieGenreObjects = useFetchNavBarCategories( ...

javascriptreactjsarraysapinext.js