如何避免滚动时写入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>