滑动上拉footer超出page-wrap容器问题求助

问题根源 #

你的footer之所以跳出page-wrap容器，核心原因有两个：

• .slide-up-footer使用了position: fixed，该定位基于浏览器视口，与父容器page-wrap的上下文无关，即使嵌套也会脱离容器范围
• 宽度设置为100vw，直接撑满整个视口宽度，忽略了page-wrap的内边距和圆角限制

修改后的CSS代码 #

仅调整与定位、布局相关的属性，其余代码保留：

/* 其他CSS代码不变，仅修改以下部分 */
.slide-up-footer {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    font: 9px SuisseIntl-Regular, sans-serif;
    position: absolute; /* 改为absolute，基于page-wrap定位 */
    bottom: -100%; /* 用百分比实现完全隐藏，适配不同屏幕 */
    left: 0;
    right: 0;
    width: auto; /* 去掉100vw，自动继承父容器宽度 */
    height: 15%;
    transition: all 0.7s ease-in-out;
    background-color: white;
    padding: 0 20px; /* 匹配page-wrap内边距，避免内容贴边 */
}

/* 移除无用的.show类，JS直接控制bottom属性即可 */
/* .slide-up-footer.show {
    top: 500px;
} */

.up-arrow {
    transition: all 0.7s ease-in-out;
    position: absolute;
    bottom: 20px; /* 调整初始位置，贴合page-wrap内边距 */
    right: 20px;
    margin: 0; /* 去掉margin，避免超出容器范围 */
    z-index: 999;
}

修改后的JavaScript代码 #

仅调整toggleFooter函数内的位置计算逻辑：

// 其他JS代码不变，仅修改toggleFooter函数
function toggleFooter() {
  if (isOpen) {
    footer.style.bottom = "-100%";
    upArrow.style.transform = "rotate(0deg)";
    upArrow.style.bottom = "20px"; // 匹配新的初始位置
  } else {
    footer.style.bottom = "0";
    upArrow.style.bottom = "calc(15% + 20px)"; // 基于footer高度计算位置，避免被遮挡
    upArrow.style.transform = "rotate(180deg)";
  }
  isOpen = !isOpen;
}

调整说明 #

1. 将footer改为position: absolute后，会基于设置了position: fixed的page-wrap进行定位，完全被限制在容器内部
2. 通过left:0; right:0; width:auto让footer自动填充page-wrap的可用宽度，配合padding保证内容与容器边缘的间距
3. 使用calc(15% + 20px)计算箭头位置，确保footer滑出后箭头不会被遮挡，同时适配不同屏幕尺寸

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