Как избежать записи в DOM при прокрутке?

Question

Мне нужно изменить заголовок контейнера в зависимости от того, какой ребенок прокручивается в данный момент. Контейнер имеет фиксированную высоту и переполнение: скрытый

HTML-то вроде этого:

<h2 class="heading">Item 1</h2> 
<div class="dealers-scrollable"> 
    <div class="dealer-group"> 
     <h3 class="group-head">Item 1</h3> 
     ... 
    </div> 
    <div class="dealer-group"> 
     <h3 class="group-head">Item 2</h3> 
     ... 
    </div> 
    <div class="dealer-group"> 
     <h3 class="group-head">Item 3</h3> 
     ... 
    </div> 
</div> 

Вот мой код:

$(".dealers-scrollable").mCustomScrollbar({ 
    callbacks: { 
     whileScrolling: function(){ 
      changeHeading(this); 
     } 
    } 
}); 

var changeHeading = (function() { 

    return function(el) { 
     var blockPosition, 
      elementPosition, 
      currentHeading; 

     $(".dealer-group").each(function() { 
      blockPosition = Math.abs(el.mcs.top); 
      elementPosition = $(this).position().top; 

      if (blockPosition > elementPosition) { 
       currentHeading = $(this).find(".group-head").text(); 
       $(".heading").text(currentHeading); 
      } 
     }); 
    } 
})(); 

Этот код делает работу. Но проблема заключается в том, что он записывает в DOM на каждом прокрутке, даже если текущий блок все еще находится в поле зрения. Это плохо, и я хочу избежать этого. Я завернул функцию в закрытие и хотел использовать флаг, но не повезло. Просьба сообщить, что можно сделать, чтобы избежать постоянного нажатия на DOM на свитке? https://jsfiddle.net/gwht91cj/

Answer 1

Проверить это JSFiddle

То, что я сделал было создать переменную для хранения всех блоков в настоящее время в поле зрения (или прокручивается прошлое), и использовали .each() для добавления каждого индекса в массиве:

var elemIndexInView = [] 

// Add index of each element that has been scrolled past 
$(".dealer-group").each(function(index) { 
    blockPosition = Math.abs(el.mcs.top); 
    elementPosition = $(this).position().top; 
    if (blockPosition > elementPosition) { 
     elemIndexInView.push(index) 
    } 
}); 

Затем внутри исходного .each() цикла, я изменил if заявление следующим образом:

if (blockPosition > elementPosition) { 
    currentHeading = $(this).children(".group-head").text(); 
    if (
     $('.heading').text() != currentHeading && 
     index == elemIndexInView[elemIndexInView.length - 1] 
    ) { 
     $(".heading").text(currentHeading); 
     // alert('Written to DOM') 
     // alert(currentHeading) 
     } 
} 

---

$(".dealers-scrollable").mCustomScrollbar({ 
 
    callbacks: { 
 
     whileScrolling: function() { 
 
      changeHeading(this); 
 
     } 
 
    } 
 
}); 
 

 
var changeHeading = (function() { 
 

 
    return function(el) { 
 
     var blockPosition, 
 
      elementPosition, 
 
      currentHeading; 
 
     var elemIndexInView = [] 
 

 
     // Add index of each element that has been scrolled past 
 
     $(".dealer-group").each(function(index) { 
 
      blockPosition = Math.abs(el.mcs.top); 
 
      elementPosition = $(this).position().top; 
 
      if (blockPosition > elementPosition) { 
 
       elemIndexInView.push(index) 
 
      } 
 
     }); 
 

 
     $(".dealer-group").each(function(index, element) { 
 
      blockPosition = Math.abs(el.mcs.top); 
 
      elementPosition = $(this).position().top; 
 

 
      if (blockPosition > elementPosition) { 
 
       currentHeading = $(this).children(".group-head").text(); 
 
       if (
 
        $('.heading').text() != currentHeading && 
 
        index == elemIndexInView[elemIndexInView.length - 1] 
 
       ) { 
 
        $(".heading").text(currentHeading); 
 
        // alert('Written to DOM') 
 
        // alert(currentHeading) 
 
       } 
 
      } 
 
     }); 
 
    } 
 
})();

.dealers-scrollable { 
 
    width: 600px; 
 
    height: 300px; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css" rel="stylesheet"/> 
 

 
<h2 class="heading">Item 1</h2> 
 
<div class="dealers-scrollable"> 
 
    <div class="dealer-group"> 
 
     <h3 class="group-head">Item 1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
    </div> 
 
    <div class="dealer-group"> 
 
     <h3 class="group-head">Item 2</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
    </div> 
 
    <div class="dealer-group"> 
 
     <h3 class="group-head">Item 3</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consequuntur nemo accusamus expedita minima, tenetur, esse nisi vel voluptas totam reiciendis harum dolorum similique voluptatem commodi deserunt, earum veritatis animi.</p> 
 
    </div> 
 
</div>