jquery - 滚动到具有水平溢出的布局中的元素(使用 onclick 或 anchor )

Question

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

前提:我想添加一个 anchor 导航，允许用户跳转到时间轴 UI 中的特定里程碑。我正在使用这个示例 EnvatoTuts .通过抓取一年中的第一个实例，我将 ID 附加到里程碑并构建 anchor 导航。

我尝试过的事情:似乎大多数信息都是关于垂直滚动 html 或 body 的，而我只想在 div 中水平滚动。

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

这是我用来设置 ID 和构建 anchor 导航的 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>

我很乐意实现任何解决方案，例如:

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

Answer 1

我用一些 CSS 解决了上述问题:

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

关键是100vw的宽度值。它使导航居中，即使 div 的 x 溢出超出了视口(viewport)的边缘。