滚动到具有水平溢出的布局中的元素（使用 onclick 或锚点）答案

【问题标题】：Scroll to element in layout with horizontal overflow (with onclick or anchor)滚动到具有水平溢出的布局中的元素（使用 onclick 或锚点）
【发布时间】：2018-01-02 17:27:23
【问题描述】：

添加 onclick 事件以触发水平溢出元素滚动的最佳方法是什么？

前提：我想添加一个锚导航，允许用户跳转到时间线 UI 中的特定里程碑。我正在使用这个例子EnvatoTuts。通过获取一年的第一个实例，我将一个 ID 附加到里程碑并构建了一个锚导航。

我尝试过的事情：似乎大多数信息都与垂直滚动 html 或正文有关，而我只想在 div 内水平滚动。

我尝试使用平滑滚动，但由于动作是水平的，浏览器会“跳”到锚点
我尝试在锚导航上使用position:fixed，但这会将导航从父容器中取出，将其附加到视口
我尝试在容器元素 (.timeline) 上使用 translateZ(0)，但 position:fixed 实际上不适用于锚导航，因为位置基本上恢复为相对位置
我尝试使用滚动插件 (sweet-scroll)，但无法弄清楚如何使用目标容器外部的导航触发滚动

这是我用来设置 ID 和构建锚导航的 javascript：

  markFirstYear("2014", "m06");
  markFirstYear("2015", "m07");
  markFirstYear("2016", "m08");
  markFirstYear("2017", "m09");
  markFirstYear("2018", "m10");

  function markFirstYear(year, id) {
    var elems = $('.timeline .year').filter(function(){
     return this.textContent.trim() === year
    }).first().parent().parent().attr('id', id);
  }

  var sweetScroll = new SweetScroll({
    horizontal: true,
    vertical: false,
  }, ".timeline");

以及用于导航的后续 HTML：

<div class="arrows">
  <ul>
    <li><a href="#m06" data-scroll>2014</a></li>
    <li><a href="#m07" data-scroll>2015</a></li>
    <li><a href="#m08" data-scroll>2016</a></li>
    <li><a href="#m09" data-scroll>2017</a></li>
  </ul>
  <button class="arrow arrow__prev disabled" disabled><img src="/img/arrow_prev.svg" alt="Previous"></button>
  <button class="arrow arrow__next"><img src="/img/arrow_next.svg" alt="Next"></button>  
</div>

我很乐意实施任何解决方案，例如：

将导航 div (.arrows) 保留在其父 div .timeline 包含的视口中，同时允许容器始终独立滚动或
通过滚动容器外的导航触发滚动。我尝试使用sweet-scroll 但是，当我将锚导航移到滚动容器.timeline 之外时，锚链接停止工作。或
向锚点添加点击事件，使用 CSS 翻译将容器滚动到适当位置

【问题讨论】：

标签： jquery html css scroll

【解决方案1】：

我用一点 CSS 解决了上述问题：

.arrows {
  position:absolute; 
  width:100vw; 
  left:50%; 
  -webkit-transform:translateX(-50%); 
          transform:translateX(-50%);
}

关键是100vw的宽度值。即使 div 有一个超出视口边缘的 x 溢出，它也会保持导航居中。

【讨论】：