如何用JavaScript让Div始终处于视口内且不发生溢出？

核心思路 #

放弃定时器方案，转而监听滚动、窗口resize、下拉触发事件这三类关键场景，每次触发时检测下拉框的溢出情况，实时调整其位置，确保始终在视口内显示，同时优先保持与触发按钮的关联关系（默认位于按钮下方）。

具体实现步骤 #

1. 复用你的溢出检测函数 #

你现有的isOutOfViewport函数可以直接用来判断元素哪一侧溢出视口，无需修改：

var isOutOfViewport = function (elem) {
    // Get element's bounding
    var bounding = elem.getBoundingClientRect();

    // Check if it's out of the viewport on each side
    var out = {};
    out.top = bounding.top < 0;
    out.left = bounding.left < 0;
    out.bottom = bounding.bottom > (window.innerHeight || document.documentElement.clientHeight);
    out.right = bounding.right > (window.innerWidth || document.documentElement.clientWidth);
    out.any = out.top || out.left || out.bottom || out.right;

    return out;
};

2. 编写位置调整逻辑 #

根据溢出方向，计算偏移量并修正下拉框的位置（假设下拉框采用固定定位）：

function adjustMenuPosition(menuEl, triggerEl) {
    const triggerRect = triggerEl.getBoundingClientRect();
    const menuRect = menuEl.getBoundingClientRect();
    const viewportW = window.innerWidth || document.documentElement.clientWidth;
    const viewportH = window.innerHeight || document.documentElement.clientHeight;

    // 初始位置：按钮下方居中
    let targetTop = triggerRect.bottom + 5; // 留5px间距
    let targetLeft = triggerRect.left + (triggerRect.width / 2) - (menuRect.width / 2);

    // 修正左侧溢出
    if (targetLeft < 10) {
        targetLeft = 10; // 保留10px边距
    }
    // 修正右侧溢出
    if (targetLeft + menuRect.width > viewportW - 10) {
        targetLeft = viewportW - menuRect.width - 10;
    }
    // 修正底部溢出：下方放不下时，移到按钮上方
    if (targetTop + menuRect.height > viewportH - 10) {
        targetTop = triggerRect.top - menuRect.height - 5;
    }
    // 修正顶部溢出：上方也放不下时，贴顶部
    if (targetTop < 10) {
        targetTop = 10;
    }

    // 应用新位置
    menuEl.style.top = `${targetTop}px`;
    menuEl.style.left = `${targetLeft}px`;
}

3. 绑定事件监听 #

在下拉菜单显示、窗口尺寸变化、页面滚动时触发位置调整：

const triggerBtn = document.querySelector('#your-trigger-btn');
const dropdownMenu = document.querySelector('#your-dropdown-menu');

// 按钮点击显示菜单并初始化位置
triggerBtn.addEventListener('click', () => {
    dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
    if (dropdownMenu.style.display === 'block') {
        adjustMenuPosition(dropdownMenu, triggerBtn);
    }
});

// 窗口resize时调整位置
window.addEventListener('resize', () => {
    if (dropdownMenu.style.display === 'block') {
        adjustMenuPosition(dropdownMenu, triggerBtn);
    }
});

// 页面滚动时调整位置
window.addEventListener('scroll', () => {
    if (dropdownMenu.style.display === 'block') {
        adjustMenuPosition(dropdownMenu, triggerBtn);
    }
});

4. 基础样式配合 #

确保下拉菜单初始隐藏，且采用固定定位：

#your-dropdown-menu {
    display: none;
    position: fixed;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    min-width: 160px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

关键说明 #

• 仅在必要场景触发调整，比定时器方案更节省性能
• 优先维持下拉菜单与触发按钮的关联关系，仅在溢出时调整位置
• 所有偏移都保留边距，避免菜单紧贴视口边缘影响体验

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