将元素居中显示在屏幕中间，以获取水平滚动列表 [英] Center an element in middle on screen for an horizontal scroll list

问题描述

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

I'm attempting to have the element clicked being positioned automatically at the center of the screen. The list is having a horizontal scroll with some overflow-x : scroll which is hiding what's outside of the div(screen). I can't find out what coordinates to pass to scrollLeft().

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

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


$('#timepicker').animate({
     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
  });

});

这篇关于将元素居中显示在屏幕中间，以获取水平滚动列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！