javascript - 将水平滚动列表的元素置于屏幕中间

Question

我试图让点击的元素自动定位在屏幕中央。该列表有一个带有一些 overflow-x : scroll 的水平滚动，它隐藏了 div(屏幕)之外的内容。我找不到要传递给 scrollLeft() 的坐标。

$('#timepicker li').on('click',function(){

    var maxScrollLeft= $("#timepicker").scrollLeft('#timepicker').prop('scrollWidth') - $("#timepicker").width();


$('#timepicker').animate({
     scrollLeft: 
});
});

请看我的代码笔:codepen

谢谢。

Answer 1

这有点棘手，但这是解决方案。

  var left = $(this).offset().left
  var width = $("#timepicker").width();
  var diff = left - width/2
  $("#timepicker").scrollLeft($("#timepicker").scrollLeft()+diff)

基本上我所做的是获取被点击元素的当前左侧位置并将其除以容器宽度的一半。这给出了滚动条必须移动才能将元素带到中间的区别。希望您理解其中的逻辑。

附上codepen http://codepen.io/prajnavantha/pen/eNwWgx

您可以将其复制粘贴到代码笔点击处理程序中并查看它是否正常工作。