父元素设置overflow-y：auto，导致子元素在水平方向无法溢出

TT17

已于 2024-11-22 18:58:06 修改

阅读量983

点赞数 6

文章标签： html javascript vue vscode

于 2024-11-15 16:48:50 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45654230/article/details/143802578

版权

在项目中遇到这样的问题，当使用overflow-y:auto的时候，却导致了绝对元素在水平方向被遮挡隐藏或者横轴出现滚动条的问题，如图一图二

原因：当 overflow-y 的值为 hidden、scroll 或者 auto，而 overflow-x 属性的值为 visible（默认值）时，该值会被隐式地计算为 auto。（MDN：overflow-x - CSS：层叠样式表 | MDN）

解决办法：将绝对元素改为fixed元素，在js中去计算相对于浏览器边缘的距离，再进行定位

获取标号DOM，再计算溢出元素应该展示的位置

function addHoverGrade() {
  const fragBoxs = document.querySelectorAll(".fragBox");
  fragBoxs.forEach((fragBox: any) => {
    fragBox.addEventListener("mouseover", (ev: any) => {
      const x = fragBox.getBoundingClientRect().left;
      const y = fragBox.getBoundingClientRect().top;
      fragBox.lastElementChild.style.top = `${y + 10}px`;
      fragBox.lastElementChild.style.left = `${x - 330}px`;
    });
  });
}