实现右侧滑入导航时Tab键致窗口右移，如何固定页面内容靠左？

问题现状 #

我正在制作一个右侧滑入的导航组件，当前实现的CSS、HTML如下：

当前CSS代码 #

html, body{
    min-height:100%;
}

body{
    overflow-x:hidden;
    width:100%;
    box-sizing:border-box;
}

.recipe-bg{
    width:calc(100vw + 270px); /* window width + recipe-container width so that it can be hidden */
    min-height:100%;
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
}

.recipe-bg-padding{ /* so that recipe-container stops when there is nav at the top */
    width:100%;
    height:535px; /* nav + banner + 100px */
}

.recipe-container{
    width:270px;
    position:sticky;
    top:50px;
    left:100%;
    z-index:90000;
    pointer-events:auto;
}

.rc-extended{
    left:calc(100vw - 270px); /* class added in js - moves recipe-container so it's touching the right side of the window */
}

.rc-button{
    position:absolute;
    height:50px;
    width:30px;
    top:40px;
    left:-30px;
}

.rc-button img{
    width:80%;
}

当前HTML代码 #

<body>
  <p>Some normal website content</p>
  <p>Some normal website content</p>
  <p>Some normal website content</p>
  
  <div class="recipe-bg">
    <div class="recipe-bg-padding"></div>
    <div class="recipe-container">
      <div class="rc-button">
        <img src="Images/list-arrow-b.svg" alt="arrow">
      </div>
      <div class="delete-div">
        <input type="password" id="password" class="delete-stay">
      </div>
    </div>
  </div>
</body>

JavaScript仅在按钮点击时给.recipe-container添加rc-extended类实现导航滑入，但遇到以下问题：

• Tab键切换焦点时，窗口会向右偏移，导航自动显示，但关闭按钮处于隐藏位置无法点击
• 刷新页面或正常操作后会无故出现偏移，普通/强制刷新无法解决，需修改地址栏重新加载才有效
• 需要实现网站内容始终固定在屏幕左侧，避免偏移

解决方案 #

1. 修复焦点触发的页面偏移 #

问题根源是Tab键聚焦到了隐藏导航内的输入框，浏览器自动滚动到聚焦元素位置。解决方法：

• 给未展开状态的导航内可聚焦元素添加tabindex="-1"，禁止其被Tab键选中：

  <input type="password" id="password" class="delete-stay" tabindex="-1">
  

• 配合JavaScript，在导航展开/收起时切换tabindex值：

  const toggleBtn = document.querySelector('.rc-button');
  const recipeContainer = document.querySelector('.recipe-container');
  const passwordInput = document.getElementById('password');
  
  toggleBtn.addEventListener('click', function() {
      recipeContainer.classList.toggle('rc-extended');
      // 切换输入框的可聚焦状态
      passwordInput.setAttribute('tabindex', recipeContainer.classList.contains('rc-extended') ? '0' : '-1');
  });
  

2. 优化定位逻辑，确保内容不偏移 #

原方案中.recipe-bg宽于视口，sticky定位易导致布局异常，改用固定定位+右侧偏移实现滑入：

/* 修改.recipe-bg样式 */
.recipe-bg{
    width:100vw; /* 仅占视口宽度，避免超出导致布局偏移 */
    min-height:100%;
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
    overflow: hidden; /* 隐藏内部超出元素 */
}

/* 修改.recipe-container样式 */
.recipe-container{
    width:270px;
    position: fixed; /* 固定定位，脱离文档流，不影响主内容布局 */
    top:50px;
    right: -270px; /* 默认完全隐藏在右侧视口外 */
    z-index:90000;
    pointer-events:auto;
    transition: right 0.3s ease; /* 添加平滑过渡动画 */
}

.rc-extended{
    right: 0; /* 展开时贴紧右侧视口 */
}

/* 调整关闭按钮定位，确保始终可访问 */
.rc-button{
    position:absolute;
    height:50px;
    width:30px;
    top:40px;
    left: -30px; /* 按钮始终显示在导航左侧，展开时可见，收起时在视口内 */
    pointer-events: auto; /* 确保按钮可点击 */
}

3. 修复刷新后异常状态 #

页面加载时强制重置导航状态，避免缓存导致的异常：

document.addEventListener('DOMContentLoaded', function() {
    const recipeContainer = document.querySelector('.recipe-container');
    const passwordInput = document.getElementById('password');
    
    // 初始状态收起导航，禁用输入框焦点
    recipeContainer.classList.remove('rc-extended');
    passwordInput.setAttribute('tabindex', '-1');
});

4. 强化主内容固定 #

确保body横向溢出隐藏生效，给主内容添加容器限制宽度：

<!-- 给主内容添加容器 -->
<div class="main-content">
  <p>Some normal website content</p>
  <p>Some normal website content</p>
  <p>Some normal website content</p>
</div>

.main-content{
    width:100vw;
    max-width:100%;
    box-sizing:border-box;
    padding:0 1rem; /* 可选，添加内边距避免内容贴边 */
}

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