Question

我有一个弹出窗口，当用户单击“继续”时，如果满足特定条件，它应该滚动到窗口底部。我正在使用类型脚本工作，不能使用任何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（），但是它不起作用，并且我已经阅读到它在许多浏览器上都不起作用，因此我试图找到一个可以在所有浏览器上工作的解决方案所有浏览器。我对此很陌生，因此非常感谢您的帮助。

Answer 1

我认为下面的cross browser解决方案代表了您的用例。

用户交互以启动该过程（单击红色框）
单击弹出窗口中的控件
将页面滚动到某些内容

在没有其他所有条件的情况下，只需调用：

MATCH (enum:Enum) 
 WHERE NOT (enum) - [:DECLARES] -> (:Method {static:true, name:"findByAttribute"})
RETURN enum.name

该单个语句会将ID为SOMEIDHERE的元素放入查看端口。

注意：如果该元素在页面底部（下面没有内容），它将显示在页面底部。

要进一步了解如何使用document.getElementById('SOMEIDHERE').scrollIntoView(); 并自行尝试 ，请参阅文档：

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

.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;
}

使用JavaScript（而非JQuery）滚动到点击页面底部

1 个答案: