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

我所做的是创建一个变量来存储当前在视图中（或滚动过去）的所有块，并使用.controller("MembersController", function ($scope, $cordovaSQLite) { $scope.insert = function (email, password, firstname, lastname, gender, dateJoined) { var query = "INSERT INTO people (email, password, firstname, lastname, gender, dateJoined, weeklyPoints, totalPoints) VALUES (?,?,?,?,?,?,0,0)"; $cordovaSQLite.execute(db, query, [email, password, firstname, lastname, gender, dateJoined, weeklyPoints, totalPoints]).then(function (res) { alert("INSERT ID -> " + res.insertId); }, function (err) { alert(err); }); });将每个索引添加到数组中：

    Map<String, Map<String, Long>> map = new HashMap<>();

    //...

    for (Entry<String, Map<String, Long>> mapEntry : map.entrySet()) {
        String mapKey = mapEntry.getKey();
        Map<String, Long> submap = mapEntry.getValue();
        for (Entry<String, Long> submapEntry : submap.entrySet()) {
            String submapKey = submapEntry.getKey();
            Long submapList = submapEntry.getValue();

            //TODO: do whatever you want with these items.
        }
    }

然后，在原始的.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)
                }
            }
        });
    }
})();

如何在滚动时避免写入DOM？

1 个答案: