Windows 10下IE11浏览器出现异常滚动行为求助

嘿，我来帮你理清这个滚动异常的问题：

这个情况本质是浏览器平滑滚动特性和容器overflow属性的冲突。当你开启平滑滚动时，浏览器会给滚动行为加动画过渡效果，但你的容器设置了overflow-x: hidden，内部表格却因为td的min-width导致总宽度超过了容器的400px，本身是可以水平滚动的。这时候拖拽表格，浏览器的平滑滚动逻辑会误把水平拖拽动作识别成水平滚动触发——哪怕容器设置了隐藏水平滚动，还是会触发内部元素的水平滚动行为。

至于关闭IE平滑滚动就恢复正常，是因为关掉平滑滚动后，浏览器取消了滚动的动画处理，滚动行为回到了原生的直接定位逻辑，这时候容器的overflow-x: hidden就能正常生效，直接阻止了水平方向的滚动触发，异常自然就消失了。Edge和IE有部分同源的滚动逻辑，所以也出现了类似的问题。

下面给你几个实用的解决办法：

办法一：让表格适配容器宽度，从根源避免水平溢出 #

最稳妥的方式是让表格宽度和容器保持一致，避免内部水平超出。修改CSS如下：

table { 
  border-spacing: 0px; 
  width: 100%; 
  table-layout: fixed; /* 固定布局，强制表格跟随容器宽度 */
}
td { 
  border: 1px solid #CCC; 
  min-width: 100px; 
  word-wrap: break-word; /* 内容过长时自动换行，防止撑开单元格 */
}
#content { 
  width: 400px; 
  height: 200px; 
  overflow-x: hidden; 
  overflow-y: scroll; 
}

这样表格会严格贴合容器宽度，不会出现水平溢出，自然就不会有拖拽水平滚动的问题了。

办法二：阻止表格的水平拖拽触发（保留表格原始宽度） #

如果需要保持表格的原始宽度，不想让单元格内容换行，可以给表格加个事件监听，阻止鼠标拖拽时的水平滚动默认行为：

const table = document.getElementById('content-ta');
table.addEventListener('mousedown', function(e) {
  const startX = e.clientX;
  // 监听鼠标移动
  const handleMouseMove = function(e) {
    const deltaX = e.clientX - startX;
    // 当水平移动超过阈值时，阻止默认滚动行为
    if (Math.abs(deltaX) > 5) {
      e.preventDefault();
    }
  };
  // 鼠标松开后移除监听
  const handleMouseUp = function() {
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
});

办法三：临时解决方案——关闭浏览器平滑滚动（不推荐） #

如果不想修改代码，也可以让用户在浏览器设置里关闭平滑滚动，但这会影响整个浏览器的滚动体验，所以只适合临时测试用。

总的来说，这个问题就是浏览器平滑滚动机制和容器overflow约束的不兼容导致的，调整表格布局或者阻止水平拖拽的默认行为，就能解决这个异常滚动的问题啦～

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