Question

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

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

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

我尝试使用平滑滚动，但由于操作是水平的，浏览器会“跳转”到锚点
我尝试在锚点导航中使用position:fixed，但这会将导航带出父容器，并将其附加到视口
我尝试在容器元素（translateZ(0)）上使用.timeline，但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）保存在其父级.timeline所包含的视口中，同时允许容器始终独立滚动或
通过滚动容器外部的导航触发滚动。我尝试使用sweet-scroll但是，当我将锚点导航移动到滚动容器.timeline之外时，锚点链接停止工作。或
将单击事件添加到使用CSS translate将容器滚动到适当位置的锚点

Answer 1

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

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

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

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

1 个答案: