Angular 10:带有position absolute和overflow: auto的div上的Router的anchorScrolling不起作用。
创始人
2024-10-15 09:00:58
0

在使用Angular 10中,如果给一个带有position: absoluteoverflow: auto样式的div上的Router的anchorScrolling不起作用,可以尝试以下解决方法:

  1. 确保在使用RouterModule.forRoot()方法配置路由时启用了anchorScrolling选项。示例代码如下:
import { NgModule } from '@angular/core';
import { RouterModule, Routes, Scroll } from '@angular/router';

const routes: Routes = [
  // 路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    anchorScrolling: 'enabled', // 启用anchorScrolling选项
    scrollPositionRestoration: 'enabled',
    scrollOffset: [0, 64], // 如果有固定的导航栏,可以设置偏移量
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  1. 在带有position: absoluteoverflow: auto样式的div上,添加scrollable属性。示例代码如下:
  1. 在组件的构造函数中注入ScrollingService,并调用scrollIntoView()方法手动滚动到指定的锚点。示例代码如下:
import { Component, OnInit, ElementRef } from '@angular/core';
import { ScrollingService } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {

  constructor(private scrollingService: ScrollingService, private elementRef: ElementRef) { }

  ngOnInit(): void {
    const element = this.elementRef.nativeElement.querySelector('#your-anchor-id');
    this.scrollingService.scrollIntoView(element);
  }

}

以上是一些可能的解决方法,根据具体情况选择适合的方式。

相关内容

热门资讯

透视模拟器!wepoker是不... 透视模拟器!wepoker是不是有人用挂(透视)竟然真的是有挂(详细辅助普及教程)1、玩家可以在软件...
科技分享!hhpoker作弊实... 1、科技分享!hhpoker作弊实战视频,wepoker怎么拿到好牌,解说技巧(有挂方法);详细教程...
透视ai!wepoker免费钻... 透视ai!wepoker免费钻石(透视)都是真的有挂(详细辅助系统教程);小薇(透视辅助)致您一封信...
一分钟教你!hhpoker是正... 一分钟教你!hhpoker是正品吗,wepoker有透视底牌吗,必赢方法(有挂透视)1、很好的工具软...
透视辅助!xpoker辅助怎么... 透视辅助!xpoker辅助怎么用(透视)好像是真的有挂(详细辅助教你教程)1、ai机器人多个强度级别...
解密关于!hhpoker作弊码... 这是一款非常优秀的wepokerplus万能挂 ia辅助检测软件,能够让你了解到wepokerplu...
2分钟细说!hhpoker怎么... 2分钟细说!hhpoker怎么防作弊,wejoker辅助软件视频,软件教程(有挂方法);玩家必备必赢...
透视游戏!wepoker钻石怎... 透视游戏!wepoker钻石怎么看底牌(透视)其实是真的有挂(详细辅助线上教程)1、机器人多个强度级...
透视工具!wepoker亲友圈... 透视工具!wepoker亲友圈有用吗(透视)原来是有挂(详细辅助德州论坛)1、金币登录送、破产送、升...
推荐一款!wepoker辅助器... 推荐一款!wepoker辅助器怎么弄,aapoker如何设置胜率,德州论坛(有挂软件)是一款可以让一...