0

我试图在第一次使用延迟加载加载页面时显示一个组件，该组件仅在视图中加载内容时才加载。例如： - 页面上有 10 个组件，我想在第一次加载时显示/滚动到组件编号 7，并使用延迟加载（以提高性能）。

我该如何正确地做到这一点？这里的挑战是因为这些组件是延迟加载的，并且有巨大的图像会弄乱 scrollIntoView() 并且滚动太多到顶部通过组件。

  • 我已经尝试过这些方法，但没有运气:(
  • 引用组件 7：
    1. 通过 scrollIntoView() 滚动到该组件。使用 window.scrollBy(0, -100) 作为导航栏。
    2. 获取组件 offsetTop 并使用 window.scrollTo(0, targetComponent.offsetTop - 100);
    3. 上述两种方法，但 setTimeout 为 2s - 5s 也不起作用。
    4. 使用 scrollIntoView() 滚动到组件，使用 setTimeout 等待几秒钟，然后再次使用 scrollIntoView() 和 window.scrollBy(0, -100) 也不起作用。
    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 与延迟加载内容一起使用的东西？谢谢！！

4

2 回答 2

0
  • 目前最好的解决方案

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
    }
  }
}
于 2019-06-30T17:19:05.787 回答
0

当。

您应该确保兼容性。

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

顺便说一句，我真的不知道您的问题是否与延迟加载实现或 scrollIntoView 更相关。如果是关于延迟加载，我强烈建议您使用JQuery 延迟加载，这将避免您对他的简单配置感到头疼。

于 2019-06-30T17:31:26.053 回答