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

What is the process for choosing a particular input element based on its size and type?

Among my pair of sets containing input type=text elements, each group is uniquely styled through CSS. In the first set, the length adjusts based on CSS using the width property. Conversely, in the second set, the size attribute determines the length of the ...

htmlcss

Having trouble accessing a fully loaded Wordpress remotely through Wamp

After installing WAMP Developer Pro on my Windows 7 computer, a testing website was set up locally. Now, I am trying to test it on the LAN, but when accessing the page, only text appears without any images, themes, or styling. Apache is running on port 80 ...

phpcsswordpresswamp

What steps should I take to make my Twitter widget adaptable to varying screen heights?

I'm currently utilizing react-twitter-widgets to incorporate a Twitter timeline within my application. While everything is rendering correctly, the height of the timeline extends down the entire page. Is there a way to adjust the widget's height ...

cssreactjstwitterbootstrap-4

Seeking assistance with design patterns for creating a reusable dialog

I have a table of users and I want to be able to edit the data for each user by popping up a dialog. Currently, the basic structure is as follows: { header: 'Edit User', cell: (cell) => { return ( <> <SimpleFormD ...

reactjsmaterial-ui

Customize Material-UI Icons styles in React app

I'm working on a React.js app with Typescript and I need to remove the default visited Material Icons coloring from an anchor tag. Here's the stylesheet I tried: const useStyles = makeStyles((theme: Theme) => createStyles( myAnchor: ...

htmlcssreactjstypescriptmaterial-ui

Which should be utilized in React: this.state or this.props?

Hey there, I'm just getting started with React and have a question regarding components. I've created a component that looks like this: class HeaderLabel extends React.Component { constructor() { super(); } componentWil ...

reactjscomponents

Tips for loading and updating data simultaneously in VUEJS from a single input

Currently, the data is displayed in a span tag with an input for updating it Is it possible to fetch data from an API, load it into an input field, update the input with new information, and send it back? What are the best approaches for achieving this? ...

javascripthtmlcssvue.jsvuejs2

Positioning Anchors in HTML Tables within the Viewport: A Comprehensive Guide

I am utilizing anchor elements within an HTML table and aiming to incorporate some spacing at the top of the viewport. I have discovered that by placing the anchor inside a dummy DIV element within the TD, I can achieve this. However, my goal is also to hi ...

csshtml-tablepositionanchorpadding

When the section comes into view on the screen, the CSS animation will play only one time

While browsing through , I found some fantastic animations that inspired me. The animations at the header seem to be standard CSS animations with delays. However, as you scroll down and other sections become visible, the animations reappear only once. Can ...

javascripthtmlcssanimationcss-animations

What's the most effective method for implementing a stylesheet through Javascript in a style switcher?

I've been tackling the challenge of creating a style switcher for my website. Through utilizing .append() and if and else statements, I managed to make it work successfully. Take a look at the code below: HTML <select name="active_style" id="lol" ...

javascripthtmlcssperformance

Ways to adjust the distance between logo and slider

I am using this script to showcase some products. You can find the script at: http://tympanus.net/Tutorials/ItemSlider/ When resizing the web browser from maximum size to smaller, I find that the height between the logo and shoes is too large for my likin ...

jqueryhtmlcssslider

Invoke a function upon a state alteration

Below is a function that I am working with: const getCurrentCharacters = () => { let result; let characters; if(selectedMovie !== 'default'){ characters = state.data.filter(movie => movie.title === selectedMovie)[0] ...

javascriptreactjsstate

Exploring the CSS scale transformation alongside the Javascript offsetHeight attribute

After combining offsetHeight with scale transformation, I experienced a strange result. Below is my simple HTML code: <body> <div id="id01"> Some Text </div> <div id="id02" style="transform-origin: left top; transf ...

javascriptcsscss-transforms

Unable to choose a child div using jQuery

<div class='class1'> <div class='class2'> <div class='class3'> some unique text </div> <div class='class5'> more unique text </div> </div> < ...

jqueryhtmlcssselect

My React application came to an unexpected halt with an error message stating: "TypeError: Cannot read properties of undefined (reading 'prototype')"

Everything was running smoothly with my app until I encountered this error without making any significant changes: TypeError: Cannot read properties of undefined (reading 'prototype') (anonymous function) .../client/node_modules/express/lib/resp ...

javascriptreactjsexpressmern

An error occurs when attempting to redirect with getServerSideProps

When I am logged in, I want to redirect to the /chat page using auth0 for authentication. The error seems to be related to returning an empty string for props, but it does not impact the website as redirection works correctly. The main issue here is the in ...

javascriptreactjstypescriptnext.js

Transforming Excel data into JSON format using ReactJS

Currently, I am in the process of converting an imported Excel file to JSON within ReactJS. While attempting to achieve this task, I have encountered some challenges using the npm XLSX package to convert the Excel data into the required JSON format. Any as ...

javascriptreactjsjsontypescriptxlsx

Having difficulty changing placeholder text style in Scss

I'm a newcomer to SCSS and I'm attempting to customize the color of my placeholder text from light gray to dark gray. Below is the HTML code snippet: <div class="form-group"> <textarea class="thread-textarea" ng-maxlength="255" ma ...

csshtmlsass

How can I add scrolling functionality to the active list item with React?

I created a music player that allows users to search for songs by artist. Check out the CODE SANDBOX here! Take a look at how the SongsList component is structured in my project: const SongsList = (props) => { const { loading, errorMess ...

javascriptreactjsscrollbaraudio-player

Retrieve the border color using Selenium WebDriver

Hey everyone, I'm currently trying to retrieve the border color of an extjs 4.2 form control text field using the getCssValue method. However, I'm having trouble getting the value as it's coming back blank. Below is a sample of my code that ...

javacssextjsseleniumselenium-webdriver