react如何实现水平滚动

 JSX文件

import React from 'react';

import './Scroll.scss';

export default class Scroll extends React.Component {

  state = {

    currentIndex: 0, // 标题分类中激活的分类

    sortList: [

      { name: "全部"},

      { name: "休闲食品"},

      { name: "遥控/电动" },

      { name: "电热水器"},

      { name: "空气能热水器"},

      { name: "洗衣机"},

      { name: "盲盒"},

    ],

  }

  // 标题向左滑动事件

  moveLeft() {

    document.getElementById('container').scrollLeft -= 150

  }

  // 标题向右滑动事件

  moveRight() {

    document.getElementById('container').scrollLeft += 150

  }

  // 标题分类的选择

  selectTitle(index) {

    this.setState({ currentIndex: index})

  }

  render() {

    return (

      <div className='scroll' >

        <div className="goodsList-title">

          <div className="goodsList-title-sort">

            <div style={{ width: '40px', position: 'relative' }}>

              <div style={{ width: '40px' }} onClick={() => this.moveLeft()}><img src={require('@/assets/images/salt/left.png')} width="7" height="12"></img></div>

              <img src={require("@/assets/images/salt/line.png")} width='1' height='33' style={{ left: '39px', top: '10px', position: 'absolute' }}></img>

            </div>

            <div style={{ display: 'inline-flex', overflow: 'hidden', flex: "1" }}>

              <ul style={{ display: 'inline-flex', width: '200%', overflowX: 'scroll' }} className="scroll-block" id='container'>

                {this.state.sortList.map((item, key) => {

                  return (

                    <div className='sore' key={key}>

                      <div

                        className={key === this.state.currentIndex ? 'current-active' : 'title-element'}

                      >

                        <div onClick={() => this.selectTitle(key)} className="element-style">

                          <span style={{ display: 'flex', justifyContent: "center" }}>{item.name}</span>

                        </div>

                        <img src={require("@/assets/images/salt/line.png")} width='1' height='33' className={key === this.state.currentIndex ? 'line-style1' : 'line-style2'}></img>

                      </div>

                    </div>

                  )

                })}

              </ul>

            </div>

            <div style={{ width: '40px' }} onClick={() => this.moveRight()}><img src={require('@/assets/images/salt/right.png')} width="7" height="12"></img></div>

          </div>

        </div>

      </div>)

  }

}

Scss文件

.scroll {

  width: 100%;

  background: #f8efe4;

  .goodsList-title {

    width: 1000px;

    margin: 15px auto;

    background: #fffbf6;

    border-radius: 5px;

    box-shadow: 0.5px 0.5px 4px 0px rgba(151, 117, 64, 0.33);

    height: 50px;

    line-height: 50px;

    font-size: 13px;

    font-family: PingFangSC, PingFangSC-Medium;

    font-weight: 500;

    text-align: center;

    color: #977540;

    letter-spacing: 0.5px;

    .goodsList-title-sort {

      display: flex;

      .title-element {

        display: flex;

        cursor: pointer;

        width: 150px;

        border-right: 1px 33px #170f06;

        justify-content: center;

        position: relative;

      }

      .current-active {

        display: flex;

        justify-content: center;

        background: linear-gradient(270deg, #9d7822 0%, #64430f);

        ;

        cursor: pointer;

        width: 150px;

        color: #fffbf6;

        position: relative;

      }

      .line-style1 {

        position: absolute;

        left: 150px;

        top: 10px;

      }

      .line-style2 {

        position: absolute;

        left: 149px;

        top: 10px;

      }

      .scroll-block::-webkit-scrollbar {

        display: none;

      }

    }

  }

}