Question

需要将对话框滚动到顶部，以便在提交表单后进入警报状态。试过这个，但似乎不适用于对话框。

window.scrollTo(0,0);

Answer 1

＆＃13;

document.getElementById('formsubmit').onclick=function(){
  document.getElementById('form').scrollTop = 0;
  return false;
}

＆＃13;

input {
  display:block;
}

.form {
  height:100px;
  overflow-y:auto;
}

＆＃13;

<div>
  <h1>form</h1>
  <div class="form" id="form">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    
    <input type="submit" id="formsubmit">
  </div>
</div>

＆＃13;

Answer 2

虽然这个问题已经被标记为答案，但这并不是以角度为单位滚动到顶部的方式。更好的方法是：

＆＃13;

@ViewChild('scrollContainer') private myScrollContainer: ElementRef;
  
constructor(private _renderer: Renderer2) {}
onFormSubmit() {
    this._renderer.setProperty(this.scrollContainer.nativeElement, 'scrollTop', this.scrollContainer.nativeElement.scrollHeight);
}

＆＃13;

input {
  display:block;
}

.form {
  height:100px;
  overflow:auto;
}

＆＃13;

<div>
    <h1>form</h1>
    <div #scrollContainer class="form">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="submit" (click)="onFormSubmit()">
    </div>
</div>

＆＃13;

一个好的经验法则是，如果你看到```document``那么你就不会采用角度方式做某事，而是采用香草方式。

人们通常犯的一个大错误就是他们使用ElementRef来设置值，属性和css。根据角度文档，ElementRef应该用作最后的手段。您可以在此处详细了解：https://angular.io/api/core/ElementRef

Answer 3

使用普通js scrollIntoView [1]

function scrollIntoView() {
  $('#modalId')[0].scrollIntoView();
}

不是一种有角度的方式，但它有效。

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

Angular2 - 如何将对话框滚动到顶部

3 个答案: