我试图让点击的元素自动定位在屏幕的中心。 该列表有一个水平滚动，其中包含一些overflow-x : scroll ，它隐藏了div（屏幕）之外的内容。 我找不到要传递给scrollLeft()坐标。
$('#timepicker li').on('click',function(){ var maxScrollLeft= $("#timepicker").scrollLeft('#timepicker').prop('scrollWidth') - $("#timepicker").width(); $('#timepicker').animate({ scrollLeft: }); });
请参阅我的codepen： codepen
谢谢。
试试这个
$('#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)
基本上我所做的是获取被点击元素的当前左侧位置并将其除以容器宽度的一半。 这给出了卷轴必须移动的差异，以便将元件带到中间。 希望你理解逻辑。
这是附带的codepen
您可以将其粘贴到代码笔点击处理程序中并查看它是否有效。
以上就是jQuery教程分享将屏幕中间的元素居中显示为水平滚动列表相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/561410.html