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
  });
});

从这个帖子：Center an element in middle on screen for an horizontal scroll list

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添加一个。

选中后，将元素浮动到div的中心

1 个答案: