NGX Perfect Scrollbar：IE11缩放缩小时移除水平滚动轴

我之前也碰到过IE11这个棘手的缩放滚动问题，给你几个实际试过有效的方案：

• 检查容器宽度与溢出设置
  IE11缩放时很容易因为容器的宽度计算偏差（比如边框、内边距没算进盒模型）导致溢出。试试给滚动容器加上这些CSS：

  .your-scroll-container {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box; /* 确保边框和内边距不会撑宽容器 */
    max-width: 100vw; /* 强制容器最大宽度不超过视口 */
  }
  

  同时要检查父级容器是否也存在溢出情况，一并设置overflow-x: hidden。

• 调整滚动插件的初始化配置
  从你提到的参数来看，应该是用了iScroll这类滚动插件。IE11下需要补充几个配置项才能让suppressScrollX生效：

  // 确保在DOM完全加载后初始化
  document.addEventListener('DOMContentLoaded', function() {
    const scrollInstance = new IScroll('.your-scroll-container', {
      suppressScrollX: true,
      useBothWheelAxes: false,
      bounce: false, // 关闭弹性效果，避免IE11下的溢出触发
      preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } // 避免影响表单元素
    });
  });
  

• IE11专属CSS Hack
  针对IE11的缩放bug，可以用专属媒体查询强制隐藏水平滚动：

  /* 仅对IE11生效的样式 */
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .your-scroll-container {
      overflow-x: hidden !important;
    }
    body {
      overflow-x: hidden !important; /* 必要时给body也加上，防止页面整体溢出 */
    }
  }
  

• 确认Viewport元标签设置
  正确的viewport设置能减少IE11缩放时的布局错乱，确保页面头部有这个标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  

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