Angular viewportScroller.scrollToAnchor()滚动定位不准且跨浏览器表现不一致

问题根因 #

1. ViewportScroller.setOffset() 仅对路由锚点自动跳转、scrollToPosition() 方法生效，直接调用scrollToAnchor()不会读取该配置，所以偏移设置无效
2. 调用滚动方法时目标DOM未完全渲染（比如异步内容加载未完成、页面重排未结束），导致获取的元素位置偏移
3. 移动端Safari和Chrome的视口高度计算逻辑不同，Safari默认会将底部导航栏高度计入视口，且滚动行为的默认实现存在差异

解决方案 #

方案1：手动计算元素位置实现滚动（兼容性最好）

放弃直接调用scrollToAnchor()，手动获取目标元素位置后滚动，可自定义偏移量，跨浏览器表现一致：

// 确保调用时目标元素已渲染完成，可放在AfterViewInit生命周期、或异步数据加载后的DOM更新回调中
const targetEl = document.getElementById('my_div');
if (targetEl) {
  // 自定义偏移量，比如固定头部高度为80px就填80，根据自己的业务调整
  const customOffset = 80;
  // 计算元素相对于文档顶部的绝对位置
  const targetTop = targetEl.getBoundingClientRect().top + window.pageYOffset - customOffset;
  // 执行滚动，兼容不同浏览器
  window.scrollTo({
    top: targetTop,
    behavior: 'smooth' // 不需要平滑滚动可以去掉该属性
  });
}

如果滚动容器不是全局window，是自定义带overflow: auto的容器，调整计算逻辑：

const scrollContainer = document.getElementById('scroll-container');
const targetEl = document.getElementById('my_div');
if (scrollContainer && targetEl) {
  const customOffset = 80;
  const targetTop = targetEl.offsetTop - customOffset;
  scrollContainer.scrollTop = targetTop;
}

方案2：全局配置偏移让scrollToAnchor()生效

如果要继续使用scrollToAnchor()方法，需要在应用初始化阶段全局配置偏移，组件内临时调用setOffset()不会生效：

1. 在根模块app.module.ts中添加初始化配置：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { ViewportScroller } from '@angular/common';

export function configViewportScroller(scroller: ViewportScroller) {
  return () => {
    // 配置全局偏移：[水平偏移, 垂直偏移]
    scroller.setOffset([0, 80]);
  };
}

@NgModule({
  // ... 其他配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: configViewportScroller,
      deps: [ViewportScroller],
      multi: true
    }
  ]
})
export class AppModule { }

2. 调用scrollToAnchor()前确保DOM已渲染完成，可加setTimeout做兜底：

setTimeout(() => {
  this.viewportScroller.scrollToAnchor('my_div');
}, 100);

移动端兼容优化

添加以下配置解决跨浏览器表现不一致问题：

1. 调整viewport meta标签，避免缩放导致的位置偏移：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 全局CSS添加滚动行为适配：

body {
  /* 禁用iOS默认滚动回弹 */
  overscroll-behavior: none;
  /* 开启iOS平滑滚动 */
  -webkit-overflow-scrolling: touch;
}

3. 如果页面适配了iOS安全区，计算偏移量时要加上env(safe-area-inset-top)对应的数值。

内容的提问来源于stack exchange，提问作者Ste