延迟加载和 ScrollIntoView() Angular2(version 7) [英] Lazy Loading and ScrollIntoView() Angular2(version 7)

问题描述

我试图在第一次加载页面时显示一个组件，延迟加载只加载视图中的内容.例如:- 页面上有 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 1
<div>Div 2</div><div>Div 3</div><div>Div 4</div><div>Div 5</div><div>Div 6</div><div #target>目标 Div 7</div><div>Div 8</div><div>Div 9</div><div>Div 10</div>

导出类 BBQComponent 实现 AfterViewInit {@ViewChild("target") targetElement: ElementRef;ngAfterViewInit() {设置超时(_ => {this.targetElement.nativeElement.scrollIntoView({block: "start"});window.scrollBy(0, -100);}, 2000);}}

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

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

解决方案

• 目前最好的解决方案

<预><代码>导出类 BBQComponent 实现 AfterContentChecked {@ViewChild("target") targetElement: ElementRef;滚动 = 假；//避免多次滚动，因为 ngAfterContentCheckedngAfterContentChecked() {//由 ngAfterViewInit() 改变而来如果(！滚动){const target = this.targetElement.nativeElement;target.scrollIntoView({block: "start"});//滚动到组件//滚动后，等待浏览器找出//延迟加载完成后的组件.再次滚动.设置超时(_ => {target.scrollIntoView({block: "start"});window.scrollBy(0, -100);//导航高度this.scrolled = true;}, 1000);//根据需要调整等待时间}}}

I'm trying to show a component when first load the page with lazy loading that only load the content if it's in the view. For example: - There are 10 components on the page and I want to show/scroll to the component number 7 on first load with lazy loading(for performance).

How do I do this correctly? Challenge here is because these components are lazy loading and have huge images that messed up the scrollIntoView() and scrolled too much to the top passed the component.

• I've tried these approaches but no luck :(
• Put a reference to the component 7:
  1. Scroll to that component by scrollIntoView(). Use window.scrollBy(0, -100) for the navigation bar.
  2. Get the component offsetTop and use window.scrollTo(0, targetComponent.offsetTop - 100);
  3. Both approaches above but with a setTimeout of 2s - 5s didn't work either.
  4. Use scrollIntoView() to scroll to the component, wait couple seconds with setTimeout and use scrollIntoView() again with window.scrollBy(0, -100) also didn't work.
  5. Give the image container a fixed height (ie: 500px), so the lazy loading images will fill up the container, but what if the component is being used on other pages get a bigger size image (ie: 1200px) will messed up the UI.
  6. The window.scrollY, window.pageYOffset, getBoundingClientRect().top and these values to get the height I need are different from the code compared from the console.log of the code vs the browser values so my calculations are incorrect.
  7. scrollIntoView({ block: 'start' }) and window.scrollBy(0, -100) also didn't work too. It scrolled too the top and passed the navbar even though I used window.scrollBy(0, -100). Also tried the setTimeout with this too.

Something like this that I tried but the component still scroll too much to the top.

<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); 
  }
}

I expect the page to show the component on first visit just below the navigation bar (about 100px in height). I have searched for the solutions and tried out different things but still stuck at this.

Is there something that I missed to get this feature scrollIntoView to work with lazy loading content? Thanks!!

解决方案

• Best solution for now

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
    }
  }
}

这篇关于延迟加载和 ScrollIntoView() Angular2(version 7)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！