在嵌套容器中定位锚点并自动溢出

问题描述 投票：0回答：1

我无法在具有溢出自动功能的 Nestet div 中使用锚并通过链接跳转到它。这是我的案例的示例文件：

https://stackblitz.com/edit/stackblitz-starters-qaldie?file=src%2Fmain.ts

（没有CSS中的溢出设置它可以工作）

希望你能帮助我。

完整代码：

import { Component, Input } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  InMemoryScrollingFeature,
  InMemoryScrollingOptions,
  provideRouter,
  Route,
  RouterModule,
  withComponentInputBinding,
  withInMemoryScrolling,
} from '@angular/router';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    <h1>Hello from {{ name }}!</h1>

<a routerLink="./" fragment="goto"> go to anchor </a>

<div class="scroll-container">
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>

  <div id="goto">lorem ipsum to goto</div>
</div>
  `,
  styles: `
  .scroll-container {
    height: 200px;
    overflow-y: auto;
  }

  #goto {
    background: red;
  }
  `,
})
export class App {
  name = 'Angular';
}

const APP_ROUTES: Route[] = [
  {
    path: '',
    redirectTo: 'sample-1',
    pathMatch: 'full',
  },
  {
    path: '**',
    redirectTo: 'sample-1',
  },
];

const scrollConfig: InMemoryScrollingOptions = {
  scrollPositionRestoration: 'top',
  anchorScrolling: 'enabled',
};

const inMemoryScrollingFeature: InMemoryScrollingFeature =
  withInMemoryScrolling(scrollConfig);

bootstrapApplication(App, {
  providers: [
    provideRouter(
      APP_ROUTES,
      withComponentInputBinding(),
      inMemoryScrollingFeature
    ),
  ],
});
angular
1个回答
0
投票

从技术上讲，由于它在滚动容器中，它在视口中仍然可见，因此片段无法正常工作，如果删除高度和滚动CSS，则滚动将正常工作，对于这种情况，我们必须使用

 scrollIntoView
元素的视图子元素上的函数，滚动到该元素，下面的工作示例

完整代码：

import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  InMemoryScrollingFeature,
  InMemoryScrollingOptions,
  provideRouter,
  Route,
  RouterModule,
  withComponentInputBinding,
  withInMemoryScrolling,
} from '@angular/router';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    <h1>Hello from {{ name }}!</h1>

<a (click)="clickEvent()" routerLink="./" > go to anchor </a>

<div class="scroll-container">
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>

  <div id="goto" #goto>lorem ipsum to goto</div>
</div>
  `,
  styles: `
  .scroll-container {
    height: 200px;
    overflow-y: auto;
  }

  #goto {
    background: red;
  }
  `,
})
export class App {
  name = 'Angular';
  @ViewChild('goto') goto!: ElementRef<any>;

  clickEvent() {
    if (this.goto?.nativeElement) {
      this.goto.nativeElement.scrollIntoView();
    }
  }
}

const APP_ROUTES: Route[] = [
  {
    path: '',
    redirectTo: 'sample-1',
    pathMatch: 'full',
  },
  {
    path: '**',
    redirectTo: 'sample-1',
  },
];

const scrollConfig: InMemoryScrollingOptions = {
  scrollPositionRestoration: 'top',
  anchorScrolling: 'enabled',
};

const inMemoryScrollingFeature: InMemoryScrollingFeature =
  withInMemoryScrolling(scrollConfig);

bootstrapApplication(App, {
  providers: [
    provideRouter(
      APP_ROUTES,
      withComponentInputBinding(),
      inMemoryScrollingFeature
    ),
  ],
});

Stackblitz 演示

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.