Прокрутите страницу вниз по клику, используя JavaScript, а не JQuery - PullRequest
Новая
       7

Прокрутите страницу вниз по клику, используя JavaScript, а не JQuery

0 голосов
/ 04 декабря 2018

У меня есть всплывающее окно, и когда пользователь нажимает «продолжить», оно должно прокручиваться до нижней части окна, если определенное условие выполняется.Я работаю в скрипте типа и не могу использовать jQuery, так что это нужно сделать с помощью javascript, а также не нужно использовать плавную прокрутку.Вот мой HTML: 

<ion-content class="pc-nativeScannerPage">

  <p *ngIf="isPackagingSuggested">
    SELECT new packaging and SELECT reason for change.
  </p>

  <ion-grid>
    <ion-row #packagingOptionsRow>
      <ion-col>
        <div class="boxItem" (click)="selectPackaging(packaging.packagingId)" [class.active]="data.inputs.selectedPackagingIds.indexOf(packaging.packagingId) !== -1">
          <p>
            <span *ngIf="language === 'EN'">{{ packaging.packagingTitle }}</span>
            <span *ngIf="!packaging.shipInExistingBox">{{ packaging.width }} x {{ packaging.height }} x {{ packaging.depth }}</span>
          </p>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-row *ngIf="isPackagingSuggested">
    <ion-col *ngFor="let reason of data.inputs.changeReasons">
      <ion-item>
        <ion-label></ion-label>
        <ion-checkbox [(ngModel)]="reason.selected" (ionChange)="onChangeReason(reason)"></ion-checkbox>
      </ion-item>
    </ion-col>  
  </ion-row>

</ion-content>

<ion-footer>
  <ion-row>
    <ion-col text-right>
      <span *ngIf="error" class="pc-continue-error">{{ error | translate }}</span>
      <button (click)="continue()" class="pc-primary" ion-button>{{ 'BUTTON_CONTINUE' | translate }}</button>
    </ion-col>
  </ion-row>
</ion-footer>

Когда пользователь нажимает кнопку с функцией continue (), я бы хотел, чтобы она прокручивалась до нижней части страницы.Ниже приведен мой JS: 

  continue() {
    if (!this.data.inputs.selectedPackagingIds.length) {
      this.error = 'Please select new packaging.'; 
    } else if (this.isPackagingSuggested && !this.data.inputs.changeReasons.filter(r => { return r.selected }).length) {
      window.scrollTo(0,document.querySelector(".pc-nativeScannerPage").scrollHeight);
      this.error = 'Please select change reason.'; 
    } else {
      this.navCtrl.setRoot(LabelPrintTab, { data: this.data });
    }
  }

Как видите, я пытался использовать scrollTO (), но это не работает, и я читал, что он не работает во многих браузерах, поэтомуЯ пытаюсь найти решение, которое будет работать во всех браузерах.Я очень новичок в этом, поэтому любая помощь очень ценится.

1 Ответ

0 голосов
/ 04 декабря 2018

Я думаю, что решение кросс-браузер , представленное ниже, соответствует вашему варианту использования.

  1. Взаимодействие с пользователем для запуска процесса (щелкните красную рамку)
  2. Щелкните элемент управленияво всплывающем окне
  3. Прокрутите страницу до некоторого содержимого

Без всего остального достаточно всего лишь позвонить: 

document.getElementById('SOMEIDHERE').scrollIntoView();

Этот единственный оператор будетпоместите элемент с идентификатором SOMEIDHERE в порт просмотра.

ПРИМЕЧАНИЕ: если этот элемент находится внизу страницы (без содержимого под ним), он появится внизу страницы.

Для получения дополнительной информации о том, как можно использовать.scrollIntoView и на самом деле попробуйте это самостоятельно , пожалуйста, обратитесь к документации:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

document.getElementById('top').addEventListener('click', () => {
  if (window.confirm("Click OK to scroll the bottom element into view")) {
    document.getElementById('bottom').scrollIntoView();
  }
});
#top {
  width: 300px;
  height: 100px;
  border: 1px solid;
  background-color: red;
  color: white;
}

.spacer {
  height: 1000px;
}

#bottom {
  width: 300px;
  height: 100px;
  border: 1px solid;
  background-color: green;
  color: white;
}
<div id="top">CLICK THIS RED BOX</div>
<div class="spacer">&nbsp;</div>
<div id="bottom">This is in the center of the page - scroll in either direction</div>
<div class="spacer">&nbsp;</div>
...