表格滚动到指定位置实现及按钮回滚指定日期位置失效问题

我来帮你排查并解决这个问题～首先咱们先理清楚为什么页面加载时正常，手动滚动后点击按钮就失效了：

问题根源 #

1. 位置计算错误：你用offset().left获取目标元素的位置，这个值是相对于整个文档的，当你手动滚动.table-wrap容器后，容器本身已经偏离了初始位置，再用这个值计算scrollLeft就不准了。
2. 元素重复干扰：你克隆了表格到#table-scroll，导致页面里有两个带data-date="2018-04-01"的元素，点击按钮时可能选中了克隆的那个，自然滚动不对。

修复步骤 #

1. 精准选中目标元素 #

明确指定选择原始表格里的目标日期元素，避开克隆的副本：

// 只选原始.main-table中的目标元素
const targetDateEl = $('.main-table [data-date="2018-04-01"]');

2. 计算相对滚动容器的位置 #

改用position().left来获取元素相对于滚动容器的左侧距离（这个值不会因为容器滚动而变化），再减去你需要的偏移量82：

3. 完整修正后的代码 #

把所有逻辑都放到DOM ready里，确保元素加载完成后再执行：

jQuery(document).ready(function() {
  // 克隆表格到滚动容器
  jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
  
  // 页面加载时滚动到01 Apr
  const initialTarget = $('.main-table [data-date="2018-04-01"]');
  $('.table-wrap').scrollLeft(initialTarget.position().left - 82);
  
  // 点击按钮回滚到01 Apr
  $(".today").click(function(){
    const targetEl = $('.main-table [data-date="2018-04-01"]');
    const scrollPos = targetEl.position().left - 82;
    $('.table-wrap').scrollLeft(scrollPos);
  });
});

备选方案（如果position()不生效） #

要是position().left因为容器布局问题不准，可以换一种方式计算：用目标元素相对于文档的偏移量，减去滚动容器相对于文档的偏移量，得到相对位置：

$(".today").click(function(){
  const targetEl = $('.main-table [data-date="2018-04-01"]');
  const containerOffset = $('.table-wrap').offset().left;
  const targetOffset = targetEl.offset().left;
  const scrollPos = targetOffset - containerOffset - 82;
  $('.table-wrap').scrollLeft(scrollPos);
});

最后别忘了确认.table-wrap的CSS样式里设置了overflow-x: scroll或者overflow-x: auto，这样scrollLeft属性才能生效哦～

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