jQuery：縮放時不精確與scrollLeft

Question

我有一個可滾動的容器與鏈接和縮略圖 - scrollLeft到縮略圖取決於通常點擊鏈接工作正常。

但是，當我使用transform縮放主容器時，scrollLeft會滾動到錯誤的位置。

任何想法如何解決這個問題？

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 
    },{ 
     duration : 400, 
     easing : 'easeOutSine' 
    }); 
    $(this.chapter).addClass('active-chapter'); 
    } 
} 

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

CSS：

.scale075 { 
    -webkit-transform: scale(0.75); /* Chrome, Safari 3.1+ */ 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform: scale(0.75); /* Firefox 3.5+ */ 
    -moz-transform-origin: 50% 50%; 
    -ms-transform: scale(0.75); /* IE 9 */ 
    -ms-transform-origin: 50% 50%; 
    -o-transform: scale(0.75); /* Opera 10.50-12.00 */ 
    -o-transform-origin: 50% 50%; 
    transform: scale(0.75); /* Firefox 16+, IE 10+, Opera 12.10+ */ 
    transform-origin: 50% 50%; 
} 

Here is a fiddle

Answer 1

，如果你知道在腳本中的規模可以解決這個問題。 我修改了你的小提琴來解決它，並試圖修復你的示例代碼。當你變換說0.75你一個變量設置爲0.75，然後當你設置scrollLeft你乘縮略圖位置1 /規模

var scrollScale = 1; 

...

Here is a fiddle

所以

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; 
    } 
} 

希望解決您的問題或給你一個想法如何更動態地解決它。

所以原因是這個position（）。left在重新計算位置時使用了你的變換。但是scrollLeft不檢查變換。所以你重新計算位置，所以他們使用相同的比例。

Answer 2

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

我覺得，在這張票上，最好使用絕對位置，然後是相對位置。 然後offsetLeft與變換沒有關係，所以一切工作正常。

fiddle