将元素居中显示在屏幕中间,以获取水平滚动列表 [英] 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屋!
查看全文