如何让子元素随可滚动父元素滚动且超出父边界仍可见？

你的需求是让子元素既随可滚动父元素同步移动，又能突破父元素边界显示，结合绝对定位和滚动事件监听就能实现，具体方案如下：

核心思路 #

1. 给弹窗元素设置相对于祖父元素的绝对定位：避开父元素overflow: auto的裁剪限制，让弹窗超出父元素的部分正常显示；
2. 监听父元素的滚动事件：实时更新弹窗的垂直位置，确保它和目标元素的相对位置不变，实现跟随滚动的效果。

修改后的代码 #

CSS 部分 #

#grandparent {
    width: 200px;
    height: 200px;
    outline: 5px red solid;
    padding: 10px;
    position: relative; /* 作为弹窗的定位基准 */
}

#parent {
    outline: 2px solid blue;
    height: 100%;
    overflow: auto;
    /* 移除父元素的position: relative，避免成为弹窗的定位基准 */
}

#popup-target {
    outline: 1px solid orange
}

#popup-target:not(:hover) ~ #popup {
    display: none;
}

#popup {
    position: absolute; /* 绝对定位，基于祖父元素 */
    outline: 1px solid gold;
    background-color: lightgray;
    width: 100px;
    left: 220px; /* 手动调整水平位置，避免和父元素重叠 */
}

HTML & JavaScript 部分 #

<div id="grandparent">
    <div id="parent">
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div id="popup-target">hover me</div>
        <div id="popup">
            <div>popup</div>
            <div>popup</div>
            <div>popup</div>
            <div>popup</div>
            <div>popup</div>
            <div>popup</div>
        </div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
    </div>
</div>

<script>
const parent = document.getElementById('parent');
const popup = document.getElementById('popup');
const popupTarget = document.getElementById('popup-target');

// 初始化弹窗的垂直位置，和目标元素对齐
function initPopupPos() {
    popup.style.top = `${popupTarget.offsetTop}px`;
}

// 父元素滚动时，同步调整弹窗位置
parent.addEventListener('scroll', () => {
    popup.style.top = `${popupTarget.offsetTop - parent.scrollTop}px`;
});

// 页面加载和窗口 resize 时重新初始化位置
window.addEventListener('load', initPopupPos);
window.addEventListener('resize', initPopupPos);
</script>

原理说明 #

• 绝对定位基于祖父元素：弹窗脱离父元素的布局流，不会被父元素的overflow: auto裁剪，超出部分可以正常显示；
• 滚动事件同步位置：父元素滚动时，scrollTop记录了滚动的垂直距离，用目标元素的offsetTop减去这个值，就能让弹窗始终和目标元素保持垂直对齐，实现跟随滚动的效果。

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