HTML/CSS浮动信息框：实现列表项旁侧重叠显示与滚动跟随

<div class="outer-container">
    <div class="placeholder left"></div>
    <div class="list-column">
        <div class="item">
            <label>name: Item 1</label>
            <div class="hover-activator">
                Hover for more info
                <div class="floating-more-info-box">
                    我希望此信息框能与 Item 1 垂直对齐，并浮动在其右侧（覆盖灰色区域），即使在滚动时也如此。
                </div>
            </div>
        </div>
        <!-- 更多列表项 -->
    </div>
    <div class="placeholder right"></div>
</div>

<style>
    .outer-container {
      display: flex;
      flex-direction: row;
      /* 稍后添加 position: relative; */
    }
    .list-column {
        width: 11rem;
        height: 10rem;
        background-color: white;
        overflow: auto; /* 允许列表滚动 */
        border: 3px solid green;
    }
    .placeholder {
        height: 10rem;
    }
    .placeholder.left {
        width: 5rem;
        background-color: palegoldenrod;
        border: 3px solid goldenrod;
    }
    .placeholder.right {
        width: 20rem;
        background-color: gray;
        border: 3px solid darkslategray;
    }
    .item {
        height: auto;
        padding: 0.4rem;
        border-width: 1px 0 1px 0;
        border-color: green;
        border-style: solid;
    }
    .hover-activator {
        border-radius: 2rem;
        border: 2px solid ;
        padding: 0 0.5rem 0 0.5rem;
        width: fit-content;
        cursor: pointer;
    }
    .floating-more-info-box {
        display: none;
        position: absolute; /* 关键属性 */
        background-color: yellow;
        padding: 0.5rem;
        /* 稍后添加定位属性 */
    }
    .item:hover .floating-more-info-box {
        display: flex;
    }
</style>

<style>
    /* ... (其他CSS保持不变) ... */
    .outer-container {
      display: flex;
      flex-direction: row;
      position: relative; /* 添加此行，设置定位上下文 */
    }
    .floating-more-info-box {
        display: none;
        position: absolute;
        background-color: yellow;
        padding: 0.5rem;
        left: 290px; /* 根据布局调整，使其位于 list-column 右侧 */
        top: 50%; /* 尝试垂直居中 */
        transform: translate(0, -50%); /* 垂直居中微调 */
        width: 265px; /* 设置宽度 */
    }
    /* ... (其他CSS保持不变) ... */
</style>

document.querySelectorAll('.item').forEach(item => {
    const activator = item.querySelector('.hover-activator');
    const infoBox = item.querySelector('.floating-more-info-box');

    let currentScrollListener = null;

    const updateInfoBoxPosition = () => {
        if (infoBox.style.display === 'flex') { // 仅在显示时更新位置
            const itemRect = activator.getBoundingClientRect();
            const outerContainerRect = document.querySelector('.outer-container').getBoundingClientRect();

            // 计算信息框的left位置（相对于outer-container）
            // itemRect.left 是 item 相对于视口左侧的距离
            // outerContainerRect.left 是 outer-container 相对于视口左侧的距离
            // listColumnWidth (11rem) + placeholderLeftWidth (5rem)
            const listColumnWidthPx = document.querySelector('.list-column').offsetWidth;
            const placeholderLeftWidthPx = document.querySelector('.placeholder.left').offsetWidth;

            const desiredLeft = itemRect.left - outerContainerRect.left + listColumnWidthPx; // 假设信息框紧贴 list-column 右侧

            // 垂直居中（相对于 activator）
            const desiredTop = itemRect.top - outerContainerRect.top + (itemRect.height / 2);

            infoBox.style.left = `${desiredLeft}px`;
            infoBox.style.top = `${desiredTop}px`;
            infoBox.style.transform = 'translateY(-50%)'; // 垂直居中微调
        }
    };

    activator.addEventListener('mouseenter', () => {
        infoBox.style.display = 'flex';
        updateInfoBoxPosition(); // 首次显示时更新位置

        // 绑定滚动事件监听器
        const listColumn = document.querySelector('.list-column');
        currentScrollListener = () => updateInfoBoxPosition();
        listColumn.addEventListener('scroll', currentScrollListener);
        window.addEventListener('resize', currentScrollListener); // 窗口大小改变也需要更新
    });

    activator.addEventListener('mouseleave', () => {
        infoBox.style.display = 'none';
        // 移除滚动事件监听器，避免性能问题
        const listColumn = document.querySelector('.list-column');
        if (currentScrollListener) {
            listColumn.removeEventListener('scroll', currentScrollListener);
            window.removeEventListener('resize', currentScrollListener);
            currentScrollListener = null;
        }
    });
});