2015-09-01 3 views
1

У меня возникают проблемы с использованием как onScroll, так и scrollTo. У меня есть два DIV, расположенных рядом друг с другом и синхронизированный свиток между ними. Значение, когда один из них свитки, другой свиток в точное место. Сделано так:Как предотвратить запуск jQuery onScroll после scrollTo

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, чтобы необходимое местоположение:

$(".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 с структурой, как это:

<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. Но после завершения прокрутки, syncCompareScroll начал, и он сломал положение левой стороны.

http://jsfiddle.net/m7ad36ju/

+0

Вы можете возиться с запросом? – Mayank

+0

сообщение html тоже пожалуйста – Ionut

ответ

0

Вы можете создать переменную в глобальной области под названием noSyncCompareScroll. По умолчанию установите значение false. Когда вы вызываете событие onClick .next-change, установите для параметра noSyncCompareScroll значение true. В syncCompareScroll проверьте значение noSyncCompareScroll. Если это правда, установите значение false и выйдите из функции; в противном случае выполните syncCompareScroll, как обычно.

+0

Привет, спасибо за ответ. Это первое, что я пробовал. И не повезло. syncCompareScroll start ПОСЛЕ завершения последнего изменения клика. –

Смежные вопросы