I am currently working on a home page for a social media website, right now I am working on how post are displayed and, in total, I have like 45 dummy post. I was wondering, is there a way I can limit the length of overflow, from css, to only display, maybe, like 5 posts at a time then when you hit the bottom of those 5 posts, another 5 posts are loaded to the screen?

Here is my code in question where I am mapping over each post:

<div id='all-post-container' style={{position: 'absolute', top: '25%', left: '20%', backgroundColor: 'red', height: '72%', width: "54%", borderRadius: '30px', overflow: 'auto'}}>
      <Grid
        container
        direction="column"
        justifyContent="center"
        alignItems="center"
        spacing={45}
      >
      {arrayOfKeysForPost.map(key => {
      return (
        <Grid container item>
        <div id="post-container" style={{margin: '5%', position: 'absolute', width: '90%', height: '40%', backgroundColor: 'white', borderRadius: '30px', overflow: 'auto'}}>
          <Avatar src={<AvatarPicture/>} style={{position: 'absolute', left: '1%', top: '3%', height: '60px', width: '60px'}} size='lg'></Avatar>
          <p style={{position: 'absolute', left: '9%', top: '-5%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '20px', lineHeight: '25px', overflow: 'auto'}}>@{state.storage.username}</p>
          <p style={{position: 'absolute', left: '9%', top: '10%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '16px', lineHeight: '20px', color: '#6D7683'}}>{state.storage.location}</p>
          <p style={{position: 'absolute', left: '20%', top: '10%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '16px', lineHeight: '20px', color: '#2D87FF'}}>time</p>
          <div id="text-container" style={{position: 'absolute', top: '30%', left: '5%', backgroundColor: '#FFFBEE', height: '30%', width: '90%', borderRadius: '16px'}}></div>
          <TextField InputProps={{
            startAdornment: (
              <InputAdornment>
                <Avatar src={state.storage.profileImageURL} />
              </InputAdornment>
            ),
            classes: {
              notchedOutline: 'notched-outline-border-radius'
          }
          }} maxRows={10} inputProps={{maxLength: 500}} multiline style={{position: 'absolute', left: '5%', top: '78%', width: '90%', background: '#F8FAFF', border: '1px solid #D9E1F9', borderRadius: '16px'}} placeholder='Write your comment'></TextField>
          <IconButton onClick={() => setLike(!like)} style={{ position: 'absolute', top: '60%', left: '5%'}} onm ouseLeave={() => setMouseOver(false)} onm ouseOver={() => setMouseOver(true)}>{like && mouseOver ? <HeartBrokenIcon style={{color: 'red'}}/> : like ? <FavoriteIcon style={{color: 'red'}} /> : <FavoriteBorderTwoToneIcon /> }</IconButton>
          <p style={{position: 'absolute', top: '59%', left: '9%'}}>likes</p>
          <IconButton onClick={() => setReply(!reply)} style={{ position: 'absolute', top: '60%', left: '13%'}}>{reply ? <MessageIcon color="primary"/> : <MessageOutlinedIcon/>}</IconButton>
          <p style={{position: 'absolute', top: '59%', left: '17%'}}>replies</p>
          <IconButton style={{ position: 'absolute', top: '60%', left: '23%'}}><IosShareOutlinedIcon /></IconButton>
          <p style={{position: 'absolute', top: '59%', left: '27%'}}>shares</p>
        </div>
        </Grid>
      )})}
      </Grid>
</div>

Here is a picture depicting what it looks like now with 45 posts... (Look at the scrollbar on the right)

CodePudding user response：

Ideally you should do this with JS, getting 5 posts, and then appending the next 5 when you hit to the bottom. But if you really want to use CSS you can use the pseudo selector nth-child

your-component-className:nth-child(n 5) {
  display: none;
}

And increasing the number 5 with JS when you reach the last post

The nth-child selector will hide the post from the 5 up

More about the nth-child pseudo selector

CodePudding user response：

There's a few ways to do this:

1. Completely hide all overflow (I'm guessing you don't want that) Simply add overflow: hidden; in your CSS file.

#all-post-container {
    overflow: hidden;
}

2. Load the elements using jQuery You can load elements from a seperate .html file. You could have one for each avatar, and use:

let post-max-count = 20
let posts = /* Use an npm package or a module to get all the files in your user avatars directory as an array */
for (let _ = 0; post =  posts[_], _  ) {
    if (_ < post-max-count) {
        $("#all-post-container").load(post)
    } else {
        break
    }
}

I can't think of any other ways to do that right now. I might add some later.