Question

我正在尝试将父div的内部滚动到设定间隔的下一个子div。但是，滚动只有一半的时间，我无法弄清楚原因。它应该滚动所有8个孩子，但只能通过大约一半。

在我制作的这个jsfiddle中，每隔一段时间偏移仅为1px，它应该是〜250px关闭。在我的实际代码中它的0px关闭，当它应该是〜250px关闭。

这是JS：

//scroll to 2nd one first
var index = 1;

setInterval(function(){
    var parent = $('.parent');
    var children = parent.find('.child');
    var target = children.eq(index);   
    var offset = target.offset().top - $('.parent').offset().top;

    //ISSUE: outputs the "same" value every other time
    console.log(target.offset().top);

    parent.animate({
        scrollTop: offset
    }, 200);
    index = (index+1) % children.length;
}, 1000);

Answer 1

尝试使用此偏移计算：

var offset = target.position().top + parent.scrollTop();

更新jsfiddle：https://jsfiddle.net/rLeLogx0/21/

<强>更新

如果您确实希望offset变量包含偏移量，则可以在scrollTop

中的.animate()参数中增加该值

var target = children.eq(index);

[...]

parent.animate({
    scrollTop: '+='+offset
}, 200);

参见jsfiddle：https://jsfiddle.net/rLeLogx0/23/

Answer 2

这样的东西？

$(document).ready(function() {
  var child = $('.parent .child'), index = 0;

  var scrollIt = function() {
    var top = child.eq(index).offset().top;
    
    index++;

    if (index >= child.length) {
      index = 0;
    }

    setTimeout(function() {
      scrollIt();
    }, 1000);

    $('html, body').animate({ scrollTop: top });
  }
  
  scrollIt();
});

.parent {
  display: block;
  width: 100%;
}

.child {
  display: block;
  width: 100%;
  height: 96px;
  background: #ccc;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>  
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
</div>

Answer 3

尝试运行position().top而不是offset.top()

请参阅difference

Answer 4

你的问题是offset给你从父母顶部到下一个目标的距离，因为孩子的最高值一直在更新，但设置scrollTop是绝对距离，而不是抵消。这是您应该使用的代码：

//scroll to 2nd one first
var index = 1;

setInterval(function(){
    var parent = $('.parent');
    var children = parent.find('.child');
    var target = children.eq(index);   
    var offset = target.offset().top - $('.parent').offset().top;

    //outputs the same value every other time
    console.log(target.offset().top);

    var newScroll = parent.scrollTop() + offset;

    parent.animate({
        scrollTop: newScroll
    }, 200);
    index = (index+1) % children.length;
}, 1000);

JsFiddle：https://jsfiddle.net/mvs6Ltgu/

jQuery offset（）。每隔一段时间略微偏离

4 个答案: