Question

我在使用onScroll和scrollTo时遇到了麻烦。我有两个DIV彼此相邻放置，并在它们之间同步滚动。当其中一个滚动时，另一个滚动到确切位置。像这样：

function syncCompareScroll(e) {
var $other;
var $this = $(this);
if ($(this).hasClass('left-doc')) {
    $other = $(".right-doc");
} else {
    $other = $(".left-doc");
}
console.log("scroll called " + $(this).attr("class"));

clearTimeout(compareScrollTimer);
compareScrollTimer = setTimeout(function () {
    $this.off('scroll');
    $other.off('scroll');

    var cutoff = $this.scrollTop();
    var elemOffset;
    var $currElement = $this.children().first();

    $this.find("[name ^= 'sect']").each(function () {
        elemOffset = $(this).offset().top;
        if ((elemOffset + cutoff - 100 - 30) > cutoff) {
            $currElement = $(this);
            return false;
        }
    });
    var elemToScroll = $other.find($("[name = '" + $currElement.attr("name") + "']"));
    $other.scrollTo(elemToScroll, 0, {axis: 'y'});

    setTimeout(function () {
        $this.on("scroll", syncCompareScroll);
        $other.on("scroll", syncCompareScroll);
    }, 50);
}, 200);}

我也有按钮可以将DIV和DIV滚动到所需的位置：

$(".next-change").click(function () {
                if (index < changedSectionsNames.length) {
                    index++;
                    var name = changedSectionsNames[index];
                    var $leftChange = $(".left-doc [name = '" + name + "']");
                    var $rightChange = $(".right-doc [name = '" + name + "']");
                    if ($leftChange.hasClass("added")) {
                        $rightChange = $(".right-doc [name = '" + $leftChange.find("del").attr("name") + "']");
                    }
                    if ($rightChange.hasClass("added")) {
                        $leftChange = $(".left-doc [name = '" + $rightChange.find("del").attr("name") + "']");
                    }
                    $(".left-doc").off('scroll', syncCompareScroll);
                    $(".right-doc").off('scroll', syncCompareScroll);
                    $(".diff .content .left-doc").scrollTo($leftChange, 200, {axis: 'y'});
                    $(".diff .content .right-doc").scrollTo($rightChange, 200, {axis: 'y'});
                    setTimeout(function () {
                        $(".left-doc").on("scroll", syncCompareScroll);
                        $(".right-doc").on("scroll", syncCompareScroll);
                    }, 50);
                }
            });

问题是当按钮onClick完成syncCompareScroll时也会调用。如何阻止它按下按钮？

UPDATE html就是2 DIV＆s，其结构如下：

<div>
    <div class='left-doc>
        <p name='sect1'>text</p>
        .... so on
    </div>
    <div class='right-doc'>
        <p name='sect1>another text</p>
        .... so on
    </div>
</div>

这是jsfiddle的例子。按下DIV后你可以看到滚动到需要的p。但是在scrollto完成后，syncCompareScroll启动了，它打破了左侧的位置。

http://jsfiddle.net/m7ad36ju/

Answer 1

您可以在全局范围内设置名为noSyncCompareScroll的变量。默认情况下将其设置为false。当您调用.next-change onClick事件时，请将noSyncCompareScroll设置为true。在syncCompareScroll中，检查noSyncCompareScroll的值。如果是，则将其设置为false并退出该函数;否则像正常一样运行syncCompareScroll。

如何在scrollTo之后阻止jQuery onScroll触发

1 个答案: