Прокрутка переходит к нижней части страницы после изменения размера текста - PullRequest
Новая
       20

Прокрутка переходит к нижней части страницы после изменения размера текста

0 голосов
/ 17 апреля 2020

У меня есть проект Angular 8, который получает список продуктов с сервера. Поскольку количество товаров на пользователя может быть очень большим, я делаю запрос и показываю пользователю только первые 20 товаров, но когда он достигает дна контейнера, я загружаю еще 20 товаров. Для обнаружения прокрутки я использую библиотеку infinite-scroll . Все работало нормально, пока я не добавил еще одну библиотеку , которая автоматически изменяет размер названия продукта в соответствии с шириной контейнера. После его добавления прокрутка начала автоматически переходить к концу контейнера (к последнему загруженному элементу) и из-за этого запускает загрузку еще одной группы дополнительных элементов. До добавления авторазмера пользователи оставались на том же месте (в конце первых 20 элементов)

Я уже пробовал следующие шаги:

  1. Убрал бесконечную прокрутку и написал свой собственный метод для определения, когда пользователь достигает конца контейнера, чтобы загрузить новые элементы. Результат: то же поведение с прокруткой.
  2. Удалил библиотеку fittext и написал мою собственную директиву для изменения размера текстовой метки. Результат: то же поведение с переходом по прокрутке.
  3. Пытался переключить переполнение контейнера на скрытый, чтобы предотвратить прокрутку, пытался изменить значение scrollTop.

Ничего не помогает. Свиток все еще прыгает до конца каждый раз, когда загружаются новые элементы. Но когда я удаляю функцию автоматического изменения размера - все работает нормально, за исключением того, что у меня нет автоматического изменения размера ..

Может быть, у кого-то была похожая проблема или есть какие-либо идеи о том, как предотвратить этот скачок прокрутки? Спасибо!

Это мои html: 

 <div class="prizes__wrapper" *ngIf="viewModel.prizes.items.length > 0" infinite-scroll [scrollWindow]="false"
      (scrolled)="scrollDown(this.viewModel.prizes, 0)">
      <div class="content-wrapper">
        <div class="outer__wrapper" *ngFor="let prize of viewModel.prizes.items; let i=index; first as isFirst">
          <div class="inner__wrapper">
            <div class="prize">
              <div class="image-wrapper">
                <div class="prize__date">
                  {{'claim_page_won_title' | translate:(prize.created | date:'mediumDate')}}
                </div>
                <div class="prize__image" [ngStyle]="{ 'background-image': 'url(' + prize.machineImage + ')' }">
                </div>
              </div>
              <div class="prize-controls">
                <div class="title-container">
                  <p class="title" appTextFit>{{prize.prizeShortName}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Стили для контейнера с переливом: 

    .prizes__wrapper
      height: 100%
      overflow-y: scroll
      scrollbar-width: none
      -ms-overflow-style: none
...