vue3容器内部通过id定位锚点

自己记录,方便后面使用。
在此之前尝试了scrollIntoView,直接获取了需要定位的点之后应用了此方法,会 造成整个文本都会晃动。因此最终还是采用了修改父元素的scrollTop一定距离的方法。
我的父元素的的父元素的position是relative,应该这点影响不大。

const location = (point: string) => {
  const pointEl = (richtextRef.value as HTMLElement).querySelector(
    "#" + point
  ) as HTMLElement; //需要定位的点
  if (pointEl) {
  //判断是否存在,如果不存在还要继续操作会报错
    var container = document.getElementById(props.id as string); //获取父容器
    var elementY = pointEl.offsetTop; //获取需要定位的点距离最近一个具有position定位的父元素的位置,如果没有父元素定位,则是针对整个文档
    var containerY = container.offsetTop;//获取父元素的最近一个具有position定位的父元素的位置,如果没有父元素定位,则是针对整个文档
    var scrollDistance = elementY - containerY; //获取当前需要点击的点距离父元素顶部的距离
    container.scrollTop = scrollDistance; //给父元素的ScrollTop赋值
  }
};

你可能感兴趣的:(vue3,前端,javascript)