Блок текста переполнения переходит непосредственно к интерактивному элементу в Angular - PullRequest
Новая
       27

Блок текста переполнения переходит непосредственно к интерактивному элементу в Angular

0 голосов
/ 04 августа 2020

Я создаю страницу соглашения, на которой есть большой текст в маленьком окне, за которым следует флажок «Я согласен» в нижней части прокручиваемого окна. Теоретически пользователю нужно будет прокрутить окно вниз, чтобы установить флажок, а затем продолжить. Однако в настоящее время я сталкиваюсь с проблемой, когда при открытии моей страницы, чтобы увидеть соглашение, окно сразу же перескакивает в нижнюю часть страницы к флажку, который отменяет всю точку страницы. Я подозреваю, что окно проверяет, есть ли какие-либо интерактивные элементы в текущем просматриваемом контенте, и когда оно видит, что их нет, оно переходит к ближайшему просматриваемому контенту. Какое свойство в angular / html / s css вызывает этот прыжок, и как я могу его найти / контролировать? 

<p class="disclosure" id="disclosure">
  Lots of text.
  Lots of text.
  Lots of text.
  Lots of text.
  Lots of text.
  Check Here: <br> 
    <mat-checkbox (click)="toggleAgreement()"></mat-checkbox>
</p>
div class="action-buttons" >
    <button mat-button (click)="close()" class="command secondary">Cancel</button> 
    <button mat-button (click)="submit()" [disabled]="!agreed" class="command primary">Agree and Submit</button>
</div>

export class ComponentName implements OnInit, AfterViewInit {

  agreed: boolean = false;
  variable: boolean = false;

  constructor(
    public dialogRef: MatDialogRef<ComponentName>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    ) { }

  ngOnInit(): void {
    this.scroller = document.getElementById("disclosure");
    this.scrollHeight = this.scroller.scrollHeight;
    this.scroller.scrollTo(0,0);
    console.log(this.scrollHeight);
    this.data = this.agreed;
  }

  ngAfterViewInit(): void {
    this.scroller.scrollTo(0,0);
  }

  close(): boolean {
    console.log(this.scroller.scrollTop);
    this.dialogRef.close(this.data);
    return false;
  }

  toggleAgreement(): void {
    this.agreed = !this.agreed;
  }

  submit() {
    this.data = this.agreed;
    this.close();
  }

}

.disclosure {
    color: black;
    margin-left: 8%;
    padding-left: 5%;
    padding-right: 5%;
    height: 75%;
    width: 85%;
    overflow: auto;
    border: 1px solid black;
}

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

  • Переход вниз происходит после angular жизненного цикла
  • На странице нет интерактивных элементов (только текст) кроме флажка и нескольких кнопок внизу.
  • Если вы поставите пустой флажок вверху страницы, проблема больше не существует (хотя это похоже на взлом).
  • Если вы отключите флажок внизу страницы (с помощью инструмента «отключено»), проблема больше не существует (что свидетельствует о важности интерактивности).
  • Если вы разместите что-то другое , например, поле ввода или меню выбора, страница все равно переходит к нему.
  • Если вы поместите что-то вроде ссылки (), страница не перейдет к нему.
  • Страница явно начинает t вверху, а затем сразу перескакивает вниз.
  • Если вы измените стиль переполнения, проблема все еще существует.
...