DOM佈局

const label = {
  lettersort: false,
  paramname: "label",
  paramid: 0,
  title: "車源列表篩選項",
  option: [{
      value: 1,
      text: "全部"
    },
    {
      value: 2,
      text: "本地求購"
    },
    {
      value: 3,
      text: "精準收車"
    },
    {
      value: 4,
      text: "全國收車"
    },
    {
      value: 5,
      text: "同行詢價"
    },
    {
      value: 6,
      text: "可批可售"
    },
    {
      value: 7,
      text: "車抵貸款"
    },
    {
      value: 8,
      text: "消費貸款"
    },
    {
      value: 9,
      text: "商家庫容"
    },
    {
      value: 10,
      text: "代理合作"
    },
    {
      value: 11,
      text: "過戶轉籍"
    },
    {
      value: 12,
      text: "尋車拖車"
    },
    {
      value: 13,
      text: "解壓抵押"
    },
    {
      value: 14,
      text: "抵押核驗"
    }
  ]
}
filterDom = () => {
    let filterjson = label;
    let arr = filterjson.option;
    return (
        <div ref="filterBar" className="filter-list">
            {arr.map((item, index) => {
                if (item.value == this.state.filterSelect) {
                    return (
                        <div
                            ref={item.value}
                            className="filter-item active"
                            key={index}
                            value={item.value}>
                            {item.text}
                            <div className="zhishi"></div>
                        </div>
                    );
                } else {
                    return (
                        <div
                            className="filter-item"
                            onClick={() => {
                                this.filterBarClick(item);
                            }}
                            ref={item.value}
                            key={index}
                            value={item.value}>
                            {item.text}
                        </div>
                    );
                }
            })}
        </div>
    );
};
render(){
  return(
    <div>
      ...
      <div className="filter-content" style={{ display: this.state.filterBarShow }}>
          {this.filterDom()}
          <div className="shadow"></div>
          {/* 按鈕和佔位 */}
          <div
              className="filte-btn-content"
              onClick={() => {
                  this.filterBtnClick();
              }}>
              <div className="filte-btn"></div>
          </div>
      </div>
      ...
    </div>
  )
}
 

scss樣式表

.filter {
  width: 100%;
  // position: fixed;
}
.filter-content {
    overflow: hidden;
    padding-right: pxToRem(27px);
    position: relative;
    background: #fff;
    .filter-list {
        display: flex;
        overflow-x: auto;
        justify-content: space-between;
        height: pxToRem(90px);
        color: #333333;
        align-items: center;
        -webkit-overflow-scrolling: touch;
        font-size: pxToRem(32px);
        font-family:PingFangSC-Light,PingFang SC;
        font-weight:300;
        background: #fff;
        margin-right: pxToRem(100px);
        .filter-item {
            text-align: center;
            display: flex;
            // flex-basis: 17px;
            flex-shrink: 0;
            white-space: nowrap;
            padding: 0 pxToRem(25px);
            background: #fff;
            height: pxToRem(90px);
            align-items: center;
            justify-content: center;
        }
        .active{
            font-size: pxToRem(36px);
            font-weight: 600;
            height: pxToRem(90px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex: 1;
            flex-direction: column;
        }
        .zhishi{
            background: url("./../img/zhishi.png");
            background-repeat: no-repeat;
            background-size: 100%;
            width: pxToRem(25px);
            height: pxToRem(6px);
            position: absolute;
            bottom: pxToRem(10px);;
            left: 50%;
            transform: translate(-50%, 0);
            z-index: 999;
        }
    }
    
    .shadow{
        height: pxToRem(90px);
        width: pxToRem(133px);
        position: absolute;
        right: pxToRem(101px);
        top: 0;
        background:linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0.14) 100%);
        pointer-events: none;
    }
    .filte-btn{
        background: url("./../img/shaixuan.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: pxToRem(40px);
        height: pxToRem(40px);
    }
    .filte-btn-content {
        height: pxToRem(90px);
        position: absolute;
        right: pxToRem(27px);
        top: 0;
        background: #fff;
        width: pxToRem(74px);
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}
 

https://www.houdianzi.com/ vi設計公司

實現

想要居中展示首先是需要找到中心點，然後在點選是計算偏移量，把對應的標籤滾動到中心位置

filterBarClick = param => {
        const { value, text } = param;
        this.setState({
            filterSelect: value
        });
        let dom = this.refs;
        //獲取點選時當前標籤的DOM
        let valDom = dom[value];
        //獲取標籤父元素DOM
        let contentDom = dom.filterBar;
        //計算當前標籤到最左側的寬度
        let valLeft = valDom.offsetLeft;
        //計算當前標籤本身的寬度
        let valWidth = valDom.clientWidth;
        //當前標籤中心點到最左側的距離
        let valCenter = valLeft + valWidth / 2;
        //可視螢幕寬度
        let clientWidth = document.querySelector('body').offsetWidth;
        //可視螢幕中心點（減去的30是列表兩邊的15畫素的留白）
        let center = (clientWidth - 30) / 2;
        //計算當前標籤中心點和螢幕中心點的偏移量 然後滾動相應的距離
        if (valCenter > center) {
            contentDom.scrollTo({
                left: valCenter - center,
                behavior: 'smooth'
            });
        } else {
            contentDom.scrollTo({
                left: 0,
                behavior: 'smooth'
            });
        }
    };