litera / jquery-scrollintoview

Animated scroll into view jQuery plugin
http://erraticdev.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
231 stars 136 forks source link

Issues with Google Chrome #12

Open TedStatham opened 11 years ago

TedStatham commented 11 years ago

While doing some cross-browser testing, I ran into an issue where Google's Chrome wouldn't scroll anything into view using your plugin. After much sleuthing through the code and fiddling, I found the following changes to the code made it work with Chrome without breaking it from working with other browsers.

In the $.fn.extend() definition, when defining the "rel" variable, I found that Chrome was reporting back an object for the "dim.s.scrollbar.bottom" and "dim.s.scrollbar.right" used in the calculations. This was causing it to calculate rel.bottom and rel.right as undefined, causing problems down the line. By enclosing the calculations in parseInt() (see below), it fixed that for me.

var rel = {
    top: parseInt(dim.e.rect.top - (dim.s.rect.top + dim.s.border.top)),
    bottom: parseInt(dim.s.rect.bottom - dim.s.border.bottom - dim.s.scrollbar.bottom - dim.e.rect.bottom),
    left: parseInt(dim.e.rect.left - (dim.s.rect.left + dim.s.border.left)),
    right: parseInt(dim.s.rect.right - dim.s.border.right - dim.s.scrollbar.right - dim.e.rect.right)
};

One other thing that I ran into is that if you're trying to scroll a jQuery dialog UI element into view, if the contents of the dialog have a scrollbar, your extension doesn't scroll anything at all because rel.top and rel.bottom both come out positive, even though the element I want to scroll into view is well out of sight. The workaround I found was to ensure that the dialog was large enough to show all the elements without a scrollbar appearing (an adjustment of about 10 pixels in my case).

lauris commented 10 years ago

Thanks @TedStatham for the fix. Is this now fixed in the plugin?