прокрутите, чтобы следовать, как элементы добавляются динамически - PullRequest
Новая
       21

прокрутите, чтобы следовать, как элементы добавляются динамически

1 голос
/ 26 февраля 2020

(к вашему сведению, это для арт-проекта, поэтому на веб-сайте это не будет разумным занятием)

У меня есть jquery код, который проходит через дом и добавляет атрибут ( 'bar') для случайных элементов на странице. Я хотел бы, чтобы новые элементы прокручивались в поле зрения по мере их добавления. Я пробовал несколько вещей, в последнее время с помощью: eq (), чтобы определить последний такой элемент на странице, но без кости. 

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

1 Ответ

1 голос
/ 27 февраля 2020

Попробуйте добавить минимальный воспроизводимый пример: { ссылка }

Вот мое предположение о том, что вы пытаетесь сделать: 

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>

Дайте мне еще немного исходного кода и описания, которое я, вероятно, могу помочь в дальнейшем.

Лучше всего было бы, если бы вы раскошелили этот кодPen: https://codepen.io/Alexander9111/pen/qBdrQLG, а затем поделитесь этим тоже:)

Короче (если предположить, что ваш вариант использования близок / достаточно хорош), вы должны использовать селектор, подобный этому:

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

И вы можете получить столбцы (массив элементов DOM) следующим образом:

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

и вы можете получить myIndex например:

var myIndex = bars.length - 1; (помните, что массивы с нулевой индексацией)

...