Javascript 如何在屏幕上制作一个div，但只滑动该元素？

我正在为一个网页执行一个项目。我是作为一个分类栏执行的，在移动版本中，我应该离开屏幕，但我只希望组件滑动，而不是整个页面

但现在看来是这样的

另一方面，当您从该类别中选择某个内容时，该内容会被放置在左侧，并从类别列表中删除，即该内容已被选中

此组件的代码如下所示：

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;
} 

import./styles/Category.css'
从“../assets/category_list.json”导入{cate}
类类别扩展组件{
构造函数（）{
超级（）；
此.state={
美食，
selectItem:未定义，
选项：0
};
this.handleselect=this.handleselect.bind（this）；
}
HandalSelect=（e，索引）=>{
这是我的国家({
选择项：索引，
opcion:1
})
//console.log（索引）
//console.log（this.state.selectItem）
}
handaleUnSelect=（e）=>{
这是我的国家({
selectItem:未定义，
选项：0
})
}
选定的（）{
const select_pers=this.state.cate.filter（cate=>{return cate.number==this.state.selectItem}）
if（this.state.opcion==1）{
报税表（
此.handaleUnSelect（e）}>
{选择[0]。标题}

)
}
}
render（）{
var catego=未定义；
变量大小={
宽度：“808px”，
};
if（this.state.opcion！==0）{
catego=this.state.cate.filter（（cate）=>{
return cate.number！==this.state.selectItem
});
尺寸={
宽度：“748px”，
左：31%，
};
}否则{
catego=this.state.cate；
}
返回(
{this.selected（）}
{catego.map（e=>
this.handaleSelect（x，e.number）}>
{e.title}

)}
);
}
}
导出默认类别；```
还有css文件
.类别{
/*位置：绝对位置*/
宽度：858px；
高度：171像素；
背景：#ECF0F6；
边界半径：200px；
/*左：28%*/
边缘顶部：5px；
}
博克斯先生{
/*背景颜色：绿色*/
文本对齐：居中；
宽度：95%；
身高：80%；
保证金：20px 20px 20px 20px；
/*填充顶部：18px*/
}
.box1{
/*位置：绝对位置*/
/*背景颜色：黄色*/
/*左：22%*/
利润上限：28px；
文本对齐：居中；
宽度：130px；
浮动：左；
}
.验证资源中心的合理性{
右边填充：10px；
}
.图片{
宽度：80px；
高度：80px；
不透明度：0.8；
}
.文本框{
背景：#FFFFFF；
高度：48px；
边框：1px实心#ECF0F6；
/*框大小：边框框*/
盒影：0px 7px 64px rgba（0,0,0,0.07）；
边界半径：800px；
边缘顶部：6px；
/*宽度：105px*/
光标：指针；
}
.文本框p{
字体系列：流沙；
字体风格：普通；
字号：600；
字体大小：14px；
线高：20px；
字母间距：0.25px；
颜色：#78869A；
填充顶部：12px；
光标：指针；
高度：48px；
}
.文本框p：悬停{
颜色：#FF8B85；
}
.红盒子{
背景：#FF8B85；
}
.红色方框p:悬停{
颜色：gainsboro；
}
.红盒子p{
颜色：白色；
}
.红色阴影{
盒影：0px 2px 10px#FF7575；
} 

一段有效的代码片段会更有帮助

可能您可以对以下元素应用“display:flexbox”，而不是对其子元素应用“float:left”

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

然后您可以使用“flex-wrap”和“overflow”来实现您的设计