0

我有一个简单的反应应用程序，其中包含一些图片，<ul>但是在移动视图中，当我向上和向下滚动时，我的图片溢出在我的导航栏上，而我希望它们<ul>只在我的元素内滚动。我怎样才能解决这个问题 ？我已经将我的 css 写在下面正常情况以及到目前为止我为移动视图所做的工作。

在此处输入图像描述

我的反应组件：

导航栏.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%;
  }
}

感谢您的帮助。有关我的代码的任何问题，请随时提问

4

1 回答 1

1

这是因为你有position: fixed，.nav-container如果你想解决这个问题，你必须给这个列表提供margin-top与它相同的大小.nav-container

于 2020-12-01T17:35:43.047 回答