Центральный элемент в прокручиваемом элементе div

Question

Я хочу центрировать элемент в прокручиваемом элементе div. Так что, когда я загружаю компонент, выбранный div центрируется в div. Я уже пытался присвоить элементу уникальный идентификатор и центрировать его по CSS, но не получил результата.

Компонент. html

  <div class="scrollmenu">
    <a *ngFor="let a of af" (click)="selected(a, 'af')"
      [ngStyle]="{backgroundColor: a==selectedValue.af ? 'grey' : ''}">
      {{a}}
    </a>
  </div>

Компонент. css

  div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
  }

  div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
  }

  html {
    scroll-behavior: smooth;
  }

Component.ts

  selected(waarde: any, param: string) {
    this.selectedValue[param] = waarde;
  }

В этом примере я хочу центрировать число 50 в прокручиваемом делении.

StackBlitz

Answer 1

Основной трюк - поместить элемент в View, а затем передать параметр inline в центр. Если возможно, всегда присваивайте уникальный идентификатор элементу в циклах.

 document.getElementById('50').scrollIntoView({behavior: "smooth", inline: "center"});

Чтение Документы MDN

document.getElementById('40').scrollIntoView({behavior: "smooth", inline: "center"});

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

<div id="horizontalScroll" class="scrollmenu">
  <a id="0" >0</a>
  <a id="5" >5</a>
  <a id="10" >10</a>
  <a id="15" >15</a>
  <a id="20" >20</a>
  <a id="25" >25</a>
  <a id="30" >30</a>  
  <a id="35" >35</a>
  <a id="40" >40</a>
  <a id="45">45</a>
  <a id="50" >50</a>
  <a id="55" >55</a>
  <a id="60" >60</a>
  <a id="65" >65</a>
  <a id="70" >70</a>
</div>

Проверьте это на StackBlitz

Answer 2

Вот что я попробовал:

export class AppComponent  {
  name = 'Angular';
  items = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90];

  mid = Math.round(this.items.length / 2);
  selectedValue = undefined;

  selected(param: string) {
    this.selectedValue = param;
    console.log('sth', this.selectedValue, this.mid);
  }
}

<!-- html -->
<div class="scrollmenu">
  <a *ngFor="let a of items; let i = index" (click)="selected(a)"

      [ngStyle]="{order: a === selectedValue ? mid : i}"
      >
      {{a}}
  </a>
</div>

<!-- css -->

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
}

 div.scrollmenu a {
  /* display: inline-block; */
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

ref: https://stackblitz.com/edit/angular-bdmc95