CSS设置right:-100%引发横向溢出而left:-100%无该问题的解决方法

这是浏览器滚动区域计算的默认逻辑导致的：

• 视口的左、上边界是固定边界，绝对/固定定位元素超出这两个边界的部分，不会被纳入可滚动区域的计算，因此用left: -100%把导航藏在左侧时，不会触发横向滚动条
• 视口的右、下边界是动态边界，只要有内容（包括脱离正常文档流的定位元素）超出这两个边界，浏览器就会自动扩展可滚动区域来覆盖这部分内容，因此直接用right: -100%藏在右侧时，就会出现横向滚动、滚动到最右能看到隐藏导航的问题。

方案1：父容器裁剪横向溢出（实现简单） #

给导航的定位基准元素添加横向溢出隐藏属性，直接裁掉超出视口右侧的内容即可：

/* 导航基础样式 */
.nav-menu {
   background-color: #060b26;
   width: 250px;
   height: 100vh;
   position: absolute;
   top: 0;
   right: -100%;
   transition: 850ms;
}

.nav-menu.active {
   right: 0;
   transition: 350ms;
}

对应父元素需要补充的样式：

/* 如果导航是相对body绝对定位，加给body即可 */
body {
  position: relative;
  overflow-x: hidden;
}

*注意：

• 如果导航嵌套在自定义容器内做绝对定位，给对应容器加position: relative和overflow-x: hidden即可，不要盲目全局加在body上，避免影响其他模块的横向展示逻辑
• 如果导航用position: fixed定位，需要同时给html和body标签添加overflow-x: hidden才能正常裁剪溢出*

方案2：用transform做位移动画（性能最优，推荐） #

transform属性的位移效果不会触发文档流重排，也不会被计入页面滚动区域的计算，不管向哪个方向位移都不会触发滚动条，同时动画走GPU合成层，流畅度比修改left/right更高，是侧滑导航的主流实现方式：

.nav-menu {
   background-color: #060b26;
   width: 250px;
   height: 100vh;
   /* 用fixed相对视口定位，不受父元素定位影响 */
   position: fixed;
   top: 0;
   right: 0;
   /* 默认状态向右偏移自身宽度的100%，刚好藏在视口右侧外 */
   transform: translateX(100%);
   /* 只监听transform属性变化，动画性能更高 */
   transition: transform 350ms ease;
}

.nav-menu.active {
   /* 激活状态位移到视口内 */
   transform: translateX(0);
}

这个方案不需要给任何父元素添加溢出裁剪属性，也不会出现异常滚动条问题。

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