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

试试这个

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

  var pos=$(this).position().left; //get left position of li
  var currentscroll=$("#timepicker").scrollLeft(); // get current scroll position
  var divwidth=$("#timepicker").width(); //get div width
  pos=(pos+currentscroll)-(divwidth/2); // for center position if you want adjust then change this

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

});

Answer 2

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

  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

您可以将其粘贴到代码笔点击处理程序中并查看它是否有效。

将屏幕中间的元素居中显示为水平滚动列表

2 个答案: