随着元素的动态添加，滚动以跟随

Question

（仅供参考，这是一个艺术项目，所以在网站上做这件事听起来不太合理）

我有 jquery 代码通过 dom 并向页面上的运行dom 元素添加属性 ('bar')。我希望新元素在添加时滚动到视图中。我已经尝试了一些东西，最近使用 :eq() 来识别页面上最后一个这样的元素，但没有骰子。

        var last = $('[bar]').length;
        $('html,body').animate({scrollTop: $('[bar]:eq('+last+')').offset().top }, 100);

Answer 1

尝试添加一个最小的可重现示例：https://whosebug.com/help/minimal-reproducible-example

这是我对您正在尝试做的事情的猜测：

var bar_ids = ['one', 'two', 'three'];

var myInterval;
var myIndex = 0;
var myLoopCount = 0;


myInterval = setInterval(()=>{
  if (myLoopCount == 0){
    var att = document.createAttribute("bar"); 
    document.querySelector('#'+bar_ids[myIndex]).setAttributeNode(att);
  }  
  bars = $('[bar]');
  //console.log(bars[myIndex])
  $('html,body').animate({scrollTop: $(bars[myIndex]).offset().top }, 1000);
  myIndex +=1;
  if (myIndex >= bar_ids.length){
    myLoopCount += 1;
    myIndex = 0;
    if (myLoopCount > 5){
      clearInterval(myInterval)
    }    
  }
},500)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" style="height:1200px; background:#ff0000"></div>
<div id="two" style="height:1200px; background:#0004ff"></div>
<div id="three" style="height:1200px; background:#00ff04"></div>

给我更多的源代码和描述，我可能会提供进一步的帮助。

如果你能 fork 这个 codePen: https://codepen.io/Alexander9111/pen/qBdrQLG 并且然后也分享它，那就最好了:)

简而言之，（假设我猜到你的用例 close/well 足够了）你应该使用这样的选择器：

$(bars[myIndex]).offset().top

你可以像这样得到条形图（DOM 个元素的数组）：

var bars = $('[bar]');

你可以得到像这样的 myIndex：

var myIndex = bars.length - 1;（记住数组是零索引的）

随着元素的动态添加，滚动以跟随

scroll to follow as elements are dynamically added

javascript

jquery

scroll

jquery-animate