score:1
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.
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.
Related Query
- Detecting when user scrolls to bottom of div with jQuery
- How to select html nodes by ID with jquery when the id contains a dot?
- Table header to stay fixed at the top when user scrolls it out of view with jQuery
- AngularJS : ng-model binding not updating when changed with jQuery
- Trigger event when user scroll to specific element - with jQuery
- How does jQuery work when there are multiple elements with the same ID value?
- How do I catch jQuery $.getJSON (or $.ajax with datatype set to 'jsonp') error when using JSONP?
- How to send data in request body with a GET when using jQuery $.ajax()
- How to format date with hours, minutes and seconds when using jQuery UI Datepicker?
- Problem when retrieving text in JSON format containing line breaks with jQuery
- Detect with JQuery when a select changes
- JQuery UI Datepicker loses focus when selecting date with mouse
- jQuery event for HTML5 datalist when item is selected or typed input match with item in the list
- Action on blur except when specific element clicked with jQuery
- Detect when a specific <option> is selected with jQuery
- When I edit the code in a TextArea using CodeMirror how to reflect this into another textarea with js or jQuery
- link with href="#" scrolls page to top when used with jquery slidetoggle
- jQuery - Target button with enter key when input field is focused
- Change CSS element with JQuery when scroll reaches an anchor point
- How to determine when jQuery datatable is created and loaded with data
- Confirm to leave the page when editing a form with jQuery
- issue with brackets in jQuery Form Data when sending data as json
- Working with jQuery when there is no Internet connection
- IE11 is crashing when clearing a form with 5 or more fields using JQuery $(...).val("")
- jQuery success callback called with empty response when WCF method throws an Exception
- KnockoutJS property doesn't update when changing value with Jquery
- Problem with jQuery mouseleave firing when container has select box
- How to preserve newlines when showing a text file with jQuery
- Extending Forms Authentication Timeout When Making AJAX Calls With jQuery
- "Define is not defined" error when installing Jquery with Bower
- How to fix "$ is not defined" error when unit testing Jquery with Typescript using Mocha?
- I get NaN when I try to insert some HTML into a DIV element with jQuery
- How can I intercept a link with jQuery when using a ajax call?
- First option automatically selected when select box with JQuery Multiselect UI by Eric Hynds is updated dynamically
- i have error with jquery datetime picker that change the time when i focus out the controll
- Is there a jQuery solution that uses CORS when available and falls back to XDomainRequest on MSIE and JSONP on browsers with niether?
- how to hide div with jquery when click anywhere except one div?
- Strange behaviour when dragging sortable Bootstrap panels with jQuery UI
- When adding an HTML5 manifest all my jQuery (mobile) AJAX requests fail with status 0
- Bootstrap validator not working when input field value is set with jQuery .val()
- How avoid sibling element from shaking when animate with jquery
- PHP not redirecting when working with Jquery post
- ASP.NET jQuery Ajax table with inputs save when done
- Strip out non-alpha chracters with Jquery when copying text from one input to another
- Calling .Net webservice with Jquery is causing woe when trying to post data
- detect when item is being dragged left or right with jQuery UI's draggable?
- Detect when mouse leaves via top of page with jquery
- Optimizing jQuery selector / addBack() when dealing with a large collection
- Weird bug when combining an ASP.NET updatepanel with the jQuery UI DatePicker
- Parent div drop-shadow bug when children is animated with jQuery in Internet Explorer 9
More Query from same tag
- How can I display stacked barcharts horizontally in Flot?
- jQuery delete all table rows except first
- Dynamically change an element's top position based on height
- JQMIGRATE: jQuery.fn.attr('selected') may use property instead of attribute
- Ajax request succeeds but result is empty
- sort array with integer strings type in jQuery
- jQuery selecting a forms radio buttons
- jQuery selectors confusing
- jQuery Create Callback
- HTML + Add input field inside a dropdown box
- Is there any way to prevent default event and then fire it again with jQuery?
- Split textbox into 3 areas
- jQuery.getJSON().error() isn't being executed on 404 error
- How to attach both an onclick() and href to an <a> element, but only have one work at once
- tinymce jquery version vs jquery plugin
- jQuery clone div every time clicked
- Load various size images in a fancybox
- How to inverse <li> selection using :not() and :contains()?
- How to make sure one method can be bound only once to an element in jQuery
- export value of checkboxes to excel in jQuery datatables
- Get the highest and lowest values of a certain attribute in jQuery or Javascript
- Fade a div after showing for couple of seconds
- Find option text with wildcard jquery
- jQuery: finding previous div
- jQuery add class based on html
- Have Thumbnails with different images sizes Bootstrap
- Image Upload Preview is Too Slow on IE
- Loop through object get value using regex key matches Javascript
- "SCRIPT5 Access is denied" error on IE9 when firing .click() from onchange
- flot display the date in flot based on timestamp