使用jQuery隐藏侧边栏后出现水平滚动条的问题排查

原因分析 #

1. 盒模型未统一设置：如果Grid容器（#MyBody）未启用border-box盒模型，容器的padding、border会额外增加总宽度，即便列宽总和为100%，最终也会超出视口，触发水平滚动条。
2. 百分比精度误差：浏览器将百分比转换为像素时，小数部分可能被向上取整，导致列宽总和实际超过视口宽度，小屏幕下该问题更明显。
3. 内容元素溢出：若MyContent区域内存在固定宽度的元素（如设置了width: 1200px），容器缩小后这些元素会撑破布局，引发水平滚动。
4. JS resize事件的潜在问题：未做防抖处理的resize事件会导致样式频繁切换，加上$(window).width()不包含滚动条宽度，可能出现计算偏差。

解决方法 #

1. 统一盒模型（最关键）

给所有元素或Grid容器设置border-box，确保padding和border不会额外占用宽度：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

或单独针对Grid容器：

#MyBody {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. 用CSS媒体查询替代JS（更稳定高效）

原生CSS媒体查询比JS更适合响应式布局，可避免resize事件的性能问题：

/* 大屏幕默认样式 */
#MyBody {
  display: grid;
  grid-template-columns: 2% 13% 70% 15%;
  grid-template-rows: 15px 100px auto 15px;
  gap: 0;
  grid-template-areas: 
    ". . . ." 
    ". . Top ." 
    ". LeftMenu MyContent RightNotes" 
    ". . Bottom .";
}

/* 小屏幕适配（宽度<1200px） */
@media (max-width: 1199px) {
  #MyBody {
    grid-template-columns: 1.5% 96% 1.5%;
    grid-template-areas: 
      ". . ." 
      ". Top ." 
      ". MyContent ." 
      ". Bottom .";
  }
  .LeftMenu, .RightNotes {
    display: none;
  }
}

无需JS即可自动适配，还能通过grid-template-areas直接调整布局结构，逻辑更清晰。

3. 处理内容溢出

检查MyContent内的元素，移除不必要的固定宽度，给可能溢出的内容添加溢出控制：

.MyContent {
  overflow-x: auto; /* 允许内容横向滚动，或用hidden隐藏溢出 */
}

4. 优化JS方案（如果必须用JS）

若坚持使用jQuery，添加防抖减少resize触发频率，并用calc()提升宽度计算精度：

$(document).ready(function(){
  function adjustLayout() {
    const width = $(window).width();
    const $body = $("#MyBody");
    const $sidebars = $(".LeftMenu, .RightNotes");
    
    if (width < 1200) {
      $sidebars.hide();
      $body.css("grid-template-columns", "calc(0%) calc(1.5%) calc(96%) calc(1.5%)");
    } else {
      $sidebars.show();
      $body.css("grid-template-columns", "2% 13% 70% 15%");
    }
  }

  // 初始化布局
  adjustLayout();

  // 防抖处理resize事件，避免频繁触发
  let resizeTimer;
  $(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(adjustLayout, 200);
  });
});

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