div容器内定位active元素时如何避免scrollIntoView触发全局页面滚动？

你遇到的问题是scrollIntoView()默认行为会将目标元素滚动到全局视口的可见范围，因此会触发外层页面的连带滚动，要实现仅容器内部滚动，可使用以下两种方案：

方案1：手动计算偏移（兼容性最好，完全不触发全局滚动） #

直接计算激活元素相对于父容器的偏移量，手动设置父容器的滚动高度，不会触发任何外层滚动：

// 获取可滚动容器和激活元素
const container = this.el.nativeElement.querySelector('.container');
const activeEl = container.querySelector('.phrase-doc.active');

// 基础偏移计算（适用于容器为最近定位父元素的场景）
let activeOffsetTop = activeEl.offsetTop - container.offsetTop;

// 如果偏移计算不准，替换为以下通过getBoundingClientRect计算的写法
// const containerRect = container.getBoundingClientRect();
// const activeRect = activeEl.getBoundingClientRect();
// activeOffsetTop = activeRect.top - containerRect.top + container.scrollTop;

// 设置容器滚动位置
container.scrollTop = activeOffsetTop;

// 如需平滑滚动，替换为以下写法
// container.scrollTo({
//   top: activeOffsetTop,
//   behavior: 'smooth'
// })

注意：需确保.container已设置overflow: auto或overflow: scroll属性，自身为可滚动容器。

方案2：配置scrollIntoView参数（现代浏览器支持） #

给scrollIntoView传入配置项，限制滚动仅在父容器内生效：

this.el.nativeElement.querySelector('.phrase-doc.active').scrollIntoView({
  block: 'start',
  inline: 'nearest',
  scrollMode: 'if-needed'
});

该方案需要浏览器支持scrollIntoViewOptions（Chrome 61+、Firefox 36+、Safari 15.4+），兼容性略低于方案1。

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