score:1

Accepted answer

You can resolve this if you know the scale in the script. I modded your fiddle to fix it and tried to fix your example code.

Here is a fiddle

So when you transform to say 0.75 you set a variable to 0.75 then when you set the scrollLeft you multiply the thumbnail position with 1/scale

var scrollScale = 1;

...

scroll: function(){
  var chapterName = this.chapter.getAttribute('data-chapter');
  var thumbnail = $('.thumbnail-content[data-chapter="'+chapterName+'"]').parent();
  if ( !$(this.chapter).hasClass('active-chapter') ){
    $('.active-chapter').removeClass('active-chapter');
    $('#thumbnail-container').animate({
      'scrollLeft' : '+='+thumbnail.position().left * (1/scrollScale)
    },{
      duration : 400,
      easing : 'easeOutSine'
    });
    $(this.chapter).addClass('active-chapter');
  }
}

reScale: function() {
  var windowHeight = $(window).height() - 20;
  scrollScale = 1;
  if (windowHeight <= 827) {
    $('#viewer-container').addClass('scale scale075');
    scrollScale = 0.75;
  }
}

Hope that solves your problem or give you an idea how to solve it more dynamically.

So the reason for this is that position().left uses your transform when it recalculates position.. But scrollLeft dont check transform. so you recalculate position so they use the same scale.

score:2

$('#thumbnail-container').animate({
        'scrollLeft' : thumbnail[0].offsetLeft/*change here*/
      },{
        duration : 400,
        easing : 'easeOutSine'
      });

I think,in this ticket,it's better to use absolute position then relative position. And then offsetLeft has no relation with transform,so everything work fine.

fiddle


Related Query

More Query from same tag