优化Jquery Datatable水平滚动：解决双滚动异常与拖拽滚动需求

嘿，我来帮你搞定这个DataTables的滚动问题！针对你提到的双滚动条体验差、顶部滚动条失效，以及想实现鼠标拖拽滚动却没成功的情况，我整理了一套完整的实现方案：

一、先移除DataTables自带的滚动条 #

首先得关掉原生的水平滚动功能，避免出现双滚动条的冲突。在初始化DataTables的时候，调整配置项：

$('#your-table-id').DataTable({
  // 保留你原本的其他配置（比如columns、paging等）
  scrollX: false, // 禁用原生水平滚动
  responsive: false, // 如果不需要响应式布局，建议关闭避免冲突
  // 如果你之前设置了scrollY，确保不会触发垂直方向的滚动冲突
});

然后用CSS隐藏容器的滚动条（同时保留滚动功能）：

/* 给表格的外层容器添加样式，比如你可能用了class="table-container" */
.table-container {
  overflow-x: auto;
  /* 隐藏各浏览器的滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.table-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

二、实现鼠标拖拽水平滚动逻辑 #

接下来添加拖拽滚动的交互，通过监听鼠标的按下、移动、松开事件来实现平滑滚动：

$(document).ready(function() {
  const scrollContainer = $('.table-container');
  let isDragging = false;
  let startX;
  let initialScrollLeft;

  // 鼠标按下时记录初始状态
  scrollContainer.on('mousedown', function(e) {
    isDragging = true;
    // 计算鼠标在容器内的初始位置
    startX = e.pageX - $(this).offset().left;
    initialScrollLeft = $(this).scrollLeft();
    // 切换鼠标样式为"抓取"状态
    $(this).css('cursor', 'grabbing');
  });

  // 鼠标移动时计算滚动偏移
  $(document).on('mousemove', function(e) {
    if (!isDragging) return;
    e.preventDefault(); // 避免选中文字等干扰
    const currentX = e.pageX - scrollContainer.offset().left;
    // 计算滚动距离，1.2是灵敏度系数，可根据需求调整
    const scrollOffset = (startX - currentX) * 1.2;
    scrollContainer.scrollLeft(initialScrollLeft + scrollOffset);
  });

  // 鼠标松开或离开容器时停止拖拽
  $(document).on('mouseup', stopDragging);
  scrollContainer.on('mouseleave', stopDragging);

  function stopDragging() {
    isDragging = false;
    scrollContainer.css('cursor', 'grab');
  }
});

三、关键注意事项 #

• 确保你的表格外层容器（.table-container）包裹了整个DataTables的dataTables_wrapper，或者直接把样式和事件绑定到dataTables_wrapper上
• 如果表格内容没有超出容器宽度，拖拽滚动不会生效，所以要保证表格有足够多的列或者容器宽度有限
• 调整代码中的1.2系数可以改变滚动的灵敏度，数值越大滚动越快
• 测试时注意避免和DataTables的其他插件（比如响应式、固定列）冲突，如果有冲突可以暂时禁用其他插件排查

这样操作后，你就能得到一个没有原生滚动条、支持按住鼠标左键左右拖拽滚动的DataTables了，完美解决双滚动条的体验问题！

内容的提问来源于stack exchange，提问作者Marcelo Agimóvel