选中时，使元素浮动到 div 的中心

Question

我有几个选项卡，它们有水平滚动。我希望他们在我选择一个时居中。

<div class="days">
<span ng-click="changeTab(1)"  ng-class="{ 'active-tab': activeTab == 1 }">Monday</span>
<span ng-click="changeTab(2)"  ng-class="{ 'active-tab': activeTab == 2 }">Tuesday</span>
<span ng-click="changeTab(3)"  ng-class="{ 'active-tab': activeTab == 3 }">Wednesday</span>
<span ng-click="changeTab(4)"  ng-class="{ 'active-tab': activeTab == 4 }">Thursday</span>
<span ng-click="changeTab(5)"  ng-class="{ 'active-tab': activeTab == 5 }">Friday</span>
</div>

因此，单击其中一个，我希望它们滑动或其他任何东西(动画并不那么重要(到页面中心。

尝试了这样的事情：

$('.days span').on('click',function(){
var pos = $(this).position().left; //get left position of li
var currentscroll = $(".days").scrollLeft(); // get current scroll position
var divwidth = $(".days").width(); //get div width
pos = (pos + currentscroll) - (divwidth / 2); // for center position if you want adjust then change this
$('.days').animate({
scrollLeft: pos
});
});

从此线程：将元素居中显示在屏幕中间以显示水平滚动列表

Answer 1

为每个 span 标签指定一个 ID 和一个 onclick 事件。

<span ng-click="changeTab(1)"  ng-class="{ 'active-tab': activeTab == 1 }" 
id="demo" onclick="myFunction()">Monday</span>

然后此脚本会将单击的元素移动到屏幕中央。

var x_pos;
var y_pos;
var div;
function myFunction() {
x_pos = window.innerWidth/2;
y_pos = window.innerHeight/2;
div = document.getElementById("demo")
div.style.position = "absolute";
div.style.left = x_pos+'px';
div.style.top = y_pos+'px';

}

这将在没有动画的情况下移动，但可以使用 setInterval 添加一个。