Javascript 将屏幕中间的一个元素置于水平滚动列表的中心

我正试图让点击的元素自动定位在屏幕中央。列表有一个水平滚动条，其中包含一些

溢出-x:scroll

，它隐藏了div（屏幕）之外的内容。 我找不到要传递给

scrollLeft（）

的坐标

请看我的密码笔：

谢谢。

试试这个

 $('#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
  });

});

试试这个

 $('#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
  });

});

---

这有点棘手，但这里有一个解决方案

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

基本上，我所做的是获取单击元素的当前左侧位置，并将其除以容器宽度的一半。这就决定了滚动条必须移动哪一个才能将elment移到中间。希望你能理解其中的逻辑

这是附带的密码笔

---

您可以将其复制粘贴到代码笔单击处理程序中，并查看其工作情况。

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

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

基本上，我所做的是获取单击元素的当前左侧位置，并将其除以容器宽度的一半。这就决定了滚动条必须移动哪一个才能将elment移到中间。希望你能理解其中的逻辑

这是附带的密码笔

---

您可以将其复制粘贴到代码笔单击处理程序中，并查看其工作情况。

thk它对逻辑有帮助thk它对逻辑有帮助