如何從屏幕中創建一個 div 但只滑動該元素？

Question

我正在執行一個對網頁做出反應的項目。 我作為一個類別欄執行，在移動版本中我應該離開屏幕，但我只希望組件滑動而不是整個頁面。

這是它的外觀設計

但目前它看起來像這樣

這是今天的樣子

另一方面，當您從此類別中選擇某些內容時，它會被放置在左側並從類別列表中刪除，這將是它被選中

像這樣

該組件的代碼在這里：

import './styles/Category.css'

import { cate } from '../assets/category_list.json'

class Category extends Component {
  constructor(){
    super();
    this.state = {
        cate,
        selectItem: undefined,
        opcion: 0
    };

    this.handaleSelect = this.handaleSelect.bind(this);
  }

  handaleSelect = (e,index) => {
    this.setState({
      selectItem: index,
      opcion: 1
    })
    // console.log(index)
    // console.log(this.state.selectItem)
  }

  handaleUnSelect = (e) => {
    this.setState({
      selectItem: undefined,
      opcion: 0
    })
  }

  selected() {

    const select_pers = this.state.cate.filter(cate => {return cate.number === this.state.selectItem})

    if (this.state.opcion === 1) {
      return (<div className="box1 justify-content-center">  
                <div>
                  <img className="picture rounded-circle red-shadow" alt={select_pers.alt}src={require("../assets/img/"+select_pers[0].path_image)}></img>
                </div>                
                  <div className="text-box red-box" onClick={(e) => this.handaleUnSelect(e)}>
                    <p>{select_pers[0].title}</p>
                  </div>                
              </div> )
    }
  }

  render(){

    var catego = undefined;
    var size = {
      width: '808px',
    };

    if(this.state.opcion !== 0){
      catego = this.state.cate.filter((cate) => {
        return cate.number !== this.state.selectItem
      });
      size = {
        width: '748px',
        left: '31%',
      };
    }else{
      catego = this.state.cate;
    }

    return (
      <div className="d-flex justify-content-center ">
          { this.selected()}
          <div className="Category" style={size}>
              <div className="container boxe">
                <div className="row">
                  { catego.map(e => 
                  <div className="col" key={e.number}>  
                    <div>
                      <img className="picture rounded-circle" alt={e.alt} src={require("../assets/img/"+e.path_image)}></img>
                    </div>
                      <div className="text-box" onClick={(x) => this.handaleSelect(x,e.number)}>
                        <p>{e.title}</p>
                      </div>
                  </div>
                  )}

                </div>
              </div>
          </div>  
      </div>
    );
  }
}
export default Category;``` 

And the css file

    .Category {
    /* position: absolute; */
    width: 858px;
    height: 171px;
    background: #ECF0F6;
    border-radius: 200px;
    /* left: 28%; */
    margin-top: 5px;
  }

.boxe {
    /* background-color: green; */
    text-align: center;
    width: 95%;
    height: 80%;
    margin: 20px 20px 20px 20px;
    /* padding-top: 18px; */
  }
.box1{
  /* position: absolute; */
  /* background-color: yellow; */
  /* left: 22%; */
  margin-top: 28px;
  text-align: center;
  width: 130px;
  float: left;
}

.justify-content-center{
  padding-right: 10px;
}


.picture{
    width: 80px;
    height: 80px;
    opacity: 0.8;

  }

  .text-box{
    background: #FFFFFF;
    height: 48px;
    border: 1px solid #ECF0F6;
    /* box-sizing: border-box; */
    box-shadow: 0px 7px 64px rgba(0, 0, 0, 0.07);
    border-radius: 800px;
    margin-top: 6px;
    /* width: 105px; */
    cursor: pointer;
  }

  .text-box p{

    font-family: Quicksand;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #78869A;
    padding-top: 12px;
    cursor: pointer;
    height: 48px;
  }

  .text-box p:hover{
   color: #FF8B85;
  }

.red-box{
  background: #FF8B85;
}

.red-box p:hover{
  color: gainsboro;
}

.red-box p{
  color: white;
}

.red-shadow{
  box-shadow: 0px 2px 10px #FF7575;
} 

Answer 1

一個有效的代碼片段會更有幫助。

也許您可以將“display：flexbox”應用於以下元素，而不是“float：left”應用於其子元素。

<div className="d-flex justify-content-center ">

然后你可以使用“flex-wrap”和“overflow”來實現你的設計。