Question

我正在尝试制作一行div，它以时间间隔闪烁，一个div应该一次闪烁。我已经实现了这个目标。

请参阅演示：

var arr = $(".boxes");  
var current = 0;  

function bgChange() {
  if (arr.length > 0) {
    arr.removeClass("active");     
    arr.eq(current).addClass("active");           
    current = (current + 1) % arr.length;
  }  
}  
setInterval(bgChange, 200);

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>

现在，情况就是这样，当活动类到达页面可见部分的末尾之后，记录就在那里，但活动记录在页面的可见部分中不可见。所以，我想用活动的div滚动页面。

或者

可以添加分页但是该东西也应该自动工作，比如在每个div中逐个添加活动类，并且一旦活动类到达可见页面的结尾div，就应该更改页面并继续处理用于将活动类添加到div。

Answer 1

offset()方法可用于获取当前元素的坐标，然后可以使用.scrollTop( value )窗口。

class Manager: NSObject{

    var id: String = String()
    var title: String = String()
    var ManagerDesignation: String = String()

}

＆＃13;

    var elem = arr.eq(current);
    elem .addClass("active");  
    //If element is not in view port
    if (elementInViewport2(elem.get(0)) == false) {
       $(window).scrollTop(elem.offset().top);  
    }

＆＃13;

var arr = $(".boxes");  
var current = 0;  

function bgChange() {
  if (arr.length > 0) {
    arr.removeClass("active");     
    var elem = arr.eq(current);
    elem.addClass("active");    
    if (elementInViewport2(elem.get(0)) == false) {
      $(window).scrollTop(elem.offset().top);  
    }
    current = (current + 1) % arr.length;
  }  
}  

function elementInViewport2(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

setInterval(bgChange, 200);

＆＃13;

.active {
  background-color: red;
}

＆＃13;

参考Prestaul answer至How to tell if a DOM element is visible in the current viewport?

Answer 2

您可以使用以下内容检查当前突出显示的元素是否在视口之外，更新 scrollTop是否恰当：

if (arr.eq(current).offset().top > viewportBottom)
  $window.scrollTop(viewportBottom);
if (arr.eq(current).offset().top < $window.scrollTop())
  $window.scrollTop(viewportTop);

见下面的演示：

var arr = $(".boxes");
var $window = $(window);
var viewportTop = $window.scrollTop();
var viewportBottom = viewportTop + $window.height();  
var current = 0;  

function bgChange() {
  if (arr.length > 0) {
    arr.removeClass("active");     
    arr.eq(current).addClass("active");           
    current = (current + 1) % arr.length;
    if (arr.eq(current).offset().top > viewportBottom)
      $window.scrollTop(viewportBottom);
    if (arr.eq(current).offset().top < $window.scrollTop())
      $window.scrollTop(viewportTop);
  }  
}  
setInterval(bgChange, 200);

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>

使用setInterval更改背景颜色，使用活动记录自动滚动页面

2 个答案: