HTML滑动表单开发问题：如何仅显示单个表单并实现滑动切换

我来帮你搞定这个滑动表单的需求！你遇到的核心问题是没有给容器设置正确的溢出隐藏规则，再配合调整滑块的位移参数，就能实现「一个表单滑入容器中心，另一个滑出容器」的效果。

关键修改步骤 #

• 给.container添加overflow: hidden;：这是让超出容器范围的滑块内容被隐藏的核心，之前你尝试的overflow:hidden没生效，大概率是没加对元素（应该加在可视容器上，而不是滑块本身）。
• 修正.slider的transform位移值：因为滑块宽度是容器的200%，每个表单占滑块的100%宽度，所以初始状态让滑块左移0，就能刚好显示第一个表单；切换时左移50%，就能让第二个表单完全进入容器视野。
• 移除.f2的margin-left: 3rem;：这个额外的外边距会导致表单布局错位，让两个表单在滑块里紧密并排即可。

修改后的完整代码 #

index.html（无需改动）

<div class="container">
 <div class="slider" id="slide">
 <form class="f1">
 <h1>Lorem ipsum</h1>
 <input type="text" placeholder="F1" />
 <input id="SBB" type="button" value="Show other Panel" />
 </form>
 <form class="f2">
 <h1>dolor sit</h1>
 <input type="password" placeholder="F2" />
 <input id="FBB" type="button" value="Go back" />
 </form>
 </div>
 </div>

style.scss

.container {
 width: 33%;
 height: 10%;
 padding: 1rem;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%);
 background-color: #fff;
 border: 2px solid #444;
 box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 overflow: hidden; /* 新增：隐藏容器外的内容 */
}
.slider {
 display: flex;
 width: 200%;
 transform: translateX(0); /* 初始状态显示f1 */
 transition: transform 1s ease-in-out;
 &.active {
 transform: translateX(-50%); /* 切换后显示f2，左移50%刚好对齐容器 */
 transition: transform 1s ease-in-out;
 }
}
.f1 {
 width: 100%;
}
.f2 {
 width: 100%;
 /* 移除多余的margin-left，避免布局错位 */
}

core.js（无需改动）

const secondBoxBtn = document.getElementById("SBB");
const firstBoxBtn = document.getElementById("FBB");
const container = document.getElementById("slide");
secondBoxBtn.addEventListener("click", () => {
 container.classList.add("active");
});
firstBoxBtn.addEventListener("click", () => {
 container.classList.remove("active");
});

效果说明 #

• 初始状态下，.slider的transform: translateX(0)让第一个表单刚好填满容器，第二个表单在容器右侧（被overflow:hidden隐藏）。
• 点击「Show other Panel」按钮后，滑块左移50%，第二个表单滑入容器中心，第一个表单滑出容器左侧（被隐藏）。
• 点击「Go back」按钮则反向切换，实现平滑的滑入滑出过渡。

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