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

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

 $('#timepicker li').on('click',function(){ var maxScrollLeft= $("#timepicker").scrollLeft('#timepicker').prop('scrollWidth') - $("#timepicker").width(); $('#timepicker').animate({ scrollLeft: }); }); 

请参阅我的codepen： 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

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