WedX - журнал о программировании и компьютерных науках

Как сделать элемент прокрутки в окне просмотра в Angular 2+?

Это пример

В нем есть компонент со списком элементов:

class HomeComponent {
    text = 'foo';
    testObject = {fieldFirst:'foo'};
    itemList = [
        '1', 
        '2', 
        '3', 
        '4',
        '5',
        '6',
        '7',
        '8 This one should be scrolled into viewport',
        '9',
        '10',
        '11',
        '12',
      ];

    scrollToElement() {
        // Do scroll there
    }
}

Это шаблон:

 <button (click)="scrollToElement()">Scroll To 8th Element</button>
 <div class="wrapper">
    <li *ngFor="let item of itemList">{{item}}</li>
 </div>

И стили:

.wrapper {
    max-height: 300px;
    overflow-y: scroll;
}

Как сделать прокрутку 8-го элемента в области просмотра div «обертки»?

Обновлять

Это ответ не решает проблему, потому что вопрос не в том, как сфокусировать элемент, а в том, как прокрутить его.

javascript scroll angular html css
08.10.2019

Ответы:


1

Вы можете добавить уникальный идентификатор к элементам списка следующим образом:

<li *ngFor="let item of itemList; let i = index;" id="list-item-{{i}}">{{item}}</li>

Затем вы можете найти элемент в методе щелчка и использовать метод с именем scrollIntoView(); как это.

scrollToElement() {
    document.getElementById("list-item-7").scrollIntoView();
}

Демо

08.10.2019

2

В вашем элементе добавьте CSS overflow: auto; это свойство добавляет прокрутку в overflow-x и overflow-y.

Пример

const $btn = document.getElementById("btn")
const $listItem = document.getElementById("element")

$btn.addEventListener("click", function() {
  window.scrollTo(0, 4000)
  // Here yo calculate the position of your element
})
.list {
  overflow: auto;
  max-height: 200px;
  list-style-type: none
}

.list .list-item {
  margin: 0 0 5px 0;
}

.button {
  display: block;
  width: 200px;
  background: #e1e1e1;
  color: black;
  border-radius: 42px;
  padding: 14px;
  font-size: 16px;
  cursor: pointer;
  cursor: pointer
}
<button class="button" id="btn">Scroll to element</button>

<ul class="list">
  <li class="list-item">Test 1</li>
  <li class="list-item">Test 2</li>
  <li class="list-item">Test 3</li>
  <li class="list-item">Test 4</li>
  <li class="list-item">Test 5</li>
  <li class="list-item">Test 6</li>
  <li class="list-item">Test 7</li>
  <li class="list-item">Test 8</li>
  <li class="list-item">Test 9</li>
  <li class="list-item">Test 10</li>
  <li class="list-item">Test 11</li>
  <li class="list-item">Test 12</li>
  <li class="list-item" id="element">Test 13</li>
  <li class="list-item">Test 14</li>
</ul>

08.10.2019
Новые материалы
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
ИИ в аэрокосмической отрасли
Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..
Для любых предложений по сайту: [email protected]