延迟加载和 ScrollIntoView() Angular2（版本 7）

Question

我试图在第一次使用延迟加载加载页面时显示一个组件，延迟加载只加载视图中的内容。例如： - 页面上有 10 个组件，我想在第一次加载延迟加载时 show/scroll 到组件号 7（为了性能）。

如何正确执行此操作？这里的挑战是因为这些组件是延迟加载的，并且有巨大的图像弄乱了 scrollIntoView() 并且滚动到组件的顶部太多。

我试过这些方法，但没有成功:(
引用组件 7:
1. 通过 scrollIntoView() 滚动到该组件。使用 window.scrollBy(0, -100) 作为导航栏。
2. 获取组件 offsetTop 并使用 window.scrollTo(0, targetComponent.offsetTop - 100);
3. 上述两种方法，但 setTimeout 为 2s - 5s 也不起作用。
4. 使用 scrollIntoView() 滚动到组件，使用 setTimeout 等待几秒钟，然后使用 window.scrollBy(0, -100) 再次使用 scrollIntoView() 也没有用。
5. 给图片容器一个固定的高度（即：500px），这样延迟加载图片会填满容器，但是如果组件正在其他页面上使用，会得到更大尺寸的图片（即：1200px）怎么办？会搞砸 UI。
6. window.scrollY, window.pageYOffset, getBoundingClientRect().top 和这些值来获取我需要的高度与代码相比，代码与 console.log 不同浏览器值，所以我的计算不正确。
7. scrollIntoView({ block: 'start' }) 和 window.scrollBy(0, -100) 也不起作用。它滚动到顶部并通过了导航栏，即使我使用 window.scrollBy(0, -100)。也用这个尝试了 setTimeout。

我尝试过类似的方法，但组件仍然过度滚动到顶部。

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>
<div #target>Target Div 7</div>
<div>Div 8</div>
<div>Div 9</div>
<div>Div 10</div>

export class BBQComponent implements AfterViewInit {
  @ViewChild("target") targetElement: ElementRef;

  ngAfterViewInit() {
    setTimeout(_ => {
     this.targetElement.nativeElement.scrollIntoView({block: "start"});
     window.scrollBy(0, -100);
    }, 2000); 
  }
}

我希望页面在第一次访问时显示导航栏正下方的组件（大约 100 像素高）。我已经搜索了解决方案并尝试了不同的方法，但仍然坚持这一点。

我是否错过了让此功能 scrollIntoView 与延迟加载内容一起使用的内容？谢谢！！

Answer 1

目前最佳解决方案


export class BBQComponent implements AfterContentChecked {
  @ViewChild("target") targetElement: ElementRef;
  scrolled = false; // To avoid multiple scrolls because ngAfterContentChecked

  ngAfterContentChecked() { // Changed from ngAfterViewInit()
    if(!scrolled) {
      const target = this.targetElement.nativeElement;
      target.scrollIntoView({block: "start"}); // Scroll to the component

      // After scrolled, wait for the browser to figure out where the 
      // component is after lazy loading is done. Scroll again.
      setTimeout(_ => {
       target.scrollIntoView({block: "start"});
       window.scrollBy(0, -100); // Nav's height
       this.scrolled = true;
      }, 1000); // Adjust wait time as needed
    }
  }
}

Answer 2

该死的。

你应该确保兼容性。

如果您阅读此处 Doc 请注意，任何浏览器都不真正支持像 {block : "start"} 这样的选项。

顺便说一句，我真的不知道你的问题是否与延迟加载实现或scrollIntoView更相关。如果是关于延迟加载我强烈建议你使用JQuery Lazy loading，这样你就不会因为他简单的配置而头疼。

延迟加载和 ScrollIntoView() Angular2（版本 7）

Lazy Loading and ScrollIntoView() Angular2(version 7)

javascript

angular

angular6

lazy-loading

js-scrollintoview