scrollTo не прокручивается до правильной позиции

Question

Я пытаюсь использовать плагин jQuery.scrollTo с гармошкой (где один блок расширяется после нажатия на него, а другой сжимается), но он не прокручивается в нужную позицию.

Вот демонстрация: pelmeshkin.com / temp / scrolltoaccoridon

Как видите, первый щелчок прокручивается правильно, но каждый следующий идет дальше, чем должен.

Кажется, он использует начальную позицию цели (где она была до расширения / сжатия), что имеет смысл, поскольку оба события инициируются одновременно, но даже когда я пытаюсь приостановить scrollTo и подождать, пока slideUp / slideDown переход окончен, он все еще ведет себя так же. (

Answer 1

Потому что он рассчитывает позицию на основе местоположения до того, как происходит анимация. Не уверен, как бы вы поступили с этим, если честно, разве что возиться с внутренними вычислениями, что, вероятно, непросто.

Answer 2

Хорошо, я вроде решил это сам. Сначала я нахожу позиции всех интерактивных элементов при загрузке страницы с помощью offset (), помещаю их в массив, а затем передаю их в виде значений пикселей в scrollTo при событии щелчка.

Таким образом, мы даем scrollTo точные позиции в пикселях для прокрутки на странице, вместо того, чтобы полагаться на нее, чтобы рассчитать ее по идентификатору элемента. Вот как это выглядит в итоге: pelmeshkin.com

Answer 3

Чувак. N.S.F.W.

И после небольшого взлома на Effect.ScrollTo:

Effect.LazyScrollTo = function(element) { try {
  var options = arguments[1] || { };
  scrollOffsets = document.viewport.getScrollOffsets();
  elementOffsets = $(element).cumulativeOffset();

  if (options.offset) elementOffsets[1] += options.offset;

  return new Effect.Tween(null,
    scrollOffsets.top,
    elementOffsets[1],
    options,
    function(p){
      try {
        this.lazy_offset = this.lazy_offset || $(element).cumulativeOffset();
        scrollTo(scrollOffsets.left, (p.round() - (elementOffsets[1] - this.lazy_offset[1])));
      } catch(e) {
        alert(e);
      }
    }.bind(this)
  ); 
} catch(e) { alert(e); }}

А потом в другом месте ...

new Effect.SlideDown('tab1-body', {queue: 'end'});
new Effect.LazyScrollTo('tab1-heading', {queue: 'end'});

С новым годом.