如何避免在滚动时写入 DOM

How to avoid writing to DOM while scrolling?

本文关键字：DOM 滚动 何避免      更新时间：2023-09-26

我需要根据当前滚动到视图中的子项更改容器标题。容器有固定高度和溢出：隐藏

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/

看看这个 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>

相关文章：