css 防止滚动溢出

Question

我有一个简单的 React 应用程序，在 <ul> 元素中有一些图片，但是在移动视图中，当我上下滚动时，我的图片在我的导航栏上溢出，而我希望它们在我的 [=15= 中滚动] 元素而已。我怎样才能解决这个问题？我已经在下面写下了我的 css 正常情况以及我到目前为止为移动视图所做的事情。

我的反应组件：

NavBar.js

export default function NavBar() {
  const {score,topScore} = usePokemon(); //get scores 
  return (
    <div className="nav-container">
      <h1 className="app-title">Pokemon Memory Game</h1>
      <div className="scores-container">
          <div className="current-score">
            <h3>Score : {score}</h3>
          </div>
          <div className="top-score">
            <h3>Top Score : {topScore}</h3>
          </div>
      </div>
    </div>
  )
}

PokeList.js

export default function PokeList() {

    const {pokemon,fetchPokemon,loading,fetchedOnce} = useFetch();  //get fetch data  
    const {checkClicked} = usePokemon(); //get function from context api to update score 
    const fetchAndCheck = (name)=>{  //when you click on a pokemon check if it is clicked and refetch and shuffle pokemon 
      checkClicked(name);
      fetchPokemon();
    }

    return ( 
      <ul className="pokemon-list">
        { (loading && !fetchedOnce)? //show loading component only on first fetch 
          <Loader
            className = "loading-spinner"
            type="ThreeDots"
            color="#00008b"
            height={100}
            width={100}
          /> 
        : 
          pokemon.map((poke)=>{  //pokemon cards 
          return( 
          <li key = {poke.id} onClick={()=>fetchAndCheck(poke.name)}>
            <PokeCard  picture = {poke.sprites['front_default']} name = {poke.name}/>
          </li>);
          })
        }
       
      </ul> 
    )
  }

PokeCard.js

export default function PokeCard(props) {
  return (
    <div className="poke-card">
      <img src = {props.picture} alt = "pokemon-card" className="poke-entry" />
      <h5 className="poke-name"> {props.name}</h5> 
    </div>
  )
}

我的 css :

.nav-container{
  background-color:black;
  position: fixed;
  margin:0;
  width: 100%;
  height:auto;
}

.app-title{
  color:white;
  text-align: center;
}

.scores-container{
  background-color: brown;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.scores-container > * {
  margin:5px;
}

.instructions-button{
  color:white;
  background-color:royalblue;
  border:none;
  font-size: 20px;
  padding:10px;
  border-radius:20px;
  cursor: pointer;
}

.pokemon-list{
  position: absolute;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  top:25%;
  left:2%; 
}

.poke-card{  /* complete pokemon card */
  background-color: brown;
  color:white;
  text-align: center;
  margin:10px;
  cursor: pointer;
  border-radius: 10px;
}

 .poke-entry {  /* pokemon picture  */
  background-color: white;
  height:150px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.poke-name{ /* pokemon name on text   */
  padding:5px;
  font-size: 20px;
}

@media only screen and (max-width:600px){
  .scores-container{
    padding:10px;
    white-space: nowrap;
  }

  .scores-container > *{
    margin:10px;
    margin-left:5px;
  }

  .instructions-button{
    font-size:10px;
    width:auto;
  }

  .pokemon-list{
      top:40%;
  }
}

非常感谢你的帮助。如对我的代码有任何疑问，请随时提问

Answer 1

这是因为你在 .nav-container 上有 position: fixed，如果你想解决这个问题，你必须给这个列表 margin-top 和 .nav-container

css 防止滚动溢出

css prevent overflow on scroll

html

css

overflow