Notebook UI - Fixes navigation offset (#10067)

* Addresses bug: 10062. Replaced scrollTop with getBoundingClientRect.top minus the combined height of the top tabs and action bar.

* Setting initial value of chrome offset, and checking for existence of both tool bars before getting their heights.
This commit is contained in:
Hale Rankin
2020-04-17 22:20:27 -07:00
committed by GitHub
parent cb26c1c409
commit 6f066e90ef

View File

@@ -664,10 +664,17 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
navigateToSection(id: string): void {
id = id.toLowerCase();
let chromeHeight: number = 0;
let elBody: HTMLElement = document.body;
let tabBar = elBody.querySelector('.title.tabs') as HTMLElement;
let actionBar = elBody.querySelector('.editor-toolbar.actionbar-container') as HTMLElement;
let section = find(this.getSectionElements(), s => s.relativeUri && s.relativeUri.toLowerCase() === id);
if (section) {
// Scroll this section to the top of the header instead of just bringing header into view.
let scrollTop = section.headerEl.offsetTop;
if (tabBar && actionBar) {
chromeHeight = tabBar.scrollHeight + actionBar.scrollHeight;
}
let scrollTop: number = section.headerEl.getBoundingClientRect().top - (chromeHeight + 10);
(<HTMLElement>this.container.nativeElement).scrollTo({
top: scrollTop,
behavior: 'smooth'