我有下面的代碼。物品類型項目的數量是動態的。一次可以有15種以上的類型。我想使這個可滾動的橫向與左，右箭頭在兩端，如果它超過了寬度。這應該在所有設備上都能響應，包括臺式機、筆記本電腦、平板電腦和手機。箭頭應該只有在超過寬度時才可見。如何在HTML/CSS中實現這個？

感謝任何幫助。謝謝:)

<div class="container">
      <!-- Tabs here -->
      <div class="d-flex">
        <div class="me-3 article-type-item">
          <p>Searched Result</p>
        </div>
        <div class="mx-3 article-type-item">
          <p>Trending Topics</p>
        </div>
        <div class="mx-3 article-type-item">
          <p>Reporting</p>
        </div>
        <div class="mx-3 article-type-item">
          <p>Accounting</p>
        </div>
      </div>
    </div>```

我不知道是否有可能只有。鋼性鑄鐵

我們可以使用rxjs fromEvent操作符來& quot聽著& quotwindow.resize

想象一個. html就像

<div class="wrapper" *ngIf="{scrolled:obs$|async} as data">
    <div #tabgroup class="tabgroup">
      <div class="tab" [class.tab-last]="last && !data.scrolled"
                *ngFor="let i of [0,1,2,3,4];let last=last">{{i}}</div>
    </div>
    <div class="arrows" [style.display]="data.scrolled" >
      <button (click)="scroll(-60)"><</button
      ><button (click)="scroll(60)">></button>
    </div>
  </div>

我們可以看到，我們在AfterViewInit中創建了obs$

@ViewChild('tabgroup') tabgroup!: ElementRef;
  obs$!:Observable<any>

  ngAfterViewInit(){
     this.obs$ = fromEvent(window, 'resize').pipe(
        startWith(null),
        map((x) =>
          this.tabgroup &&
          this.tabgroup.nativeElement.offsetWidth <=
          this.tabgroup.nativeElement.scrollWidth
          ? null
          : 'none'
        )
     );
   }
  scroll(value: number) {
    this.tabgroup.nativeElement.scrollBy(value, 0);
  }

答。css like

.wrapper{
    position: relative;

  }
  .tabgroup {
    border: 1px solid red;
    width: 100%;
    display: flex;
    overflow: hidden;
  }
  .tab {
    min-width: 60px;
    flex-shrink: 0;
    flex-grow: 1;
    border: 1px solid silver;
  }
  .arrows {
    position: absolute;
    right: 0;
    top:0;
  }
  .tab-last{
    margin-right:42px;
  }

解決問題。

斯塔克布里茲

注意:如果您的選項卡是動態的，請使用ngAfterViewInit，在創建選項卡之后創建obs$