I have a scrolling DIV that via JQuery determines the element in the middle. I have tried using both the position() and offset() parameters and in both cases Firefox does not get the right answer whilst Chrome and Safari do.
The position().top or offset().top determine the position of the middle element from the container. Yet firefox is determining it from the scrolling container and thus giving the third element down alwa开发者_开发问答ys rather than the middle element during scroll.
Here are 2 fiddles, one using .position() and the other .offset().
OFFSET() -- http://jsfiddle.net/pxfunc/XHPYF/7/ POSITION () -- http://jsfiddle.net/U4qyp/133/
Anyone have any idea why this is happening or how to fix it?
If you look at the actual js file, the scroll behaviour is handled differently depending on the browser. For Firefox, it is manipulating -moz-transform
of the scroll element instead of the position of what's inside it.
DEMO: http://jsfiddle.net/vQXqq/
jQuery
function test() {
var $ul = $('#leftwheel');
$('#bkodate').val('');
$ul.find('li').each(function(n) {
var $this = $(this);
var $mozTransform = $(".slotinner").css("-moz-transform");
var mozfix = !($mozTransform === null) ? parseInt($mozTransform.substring($mozTransform.lastIndexOf(',') + 1, $mozTransform.length - 3)) : 0;
if ($this.position().top + $this.height() + mozfix > 100 && $this.position().top + mozfix < $ul.height()) {
var result = $('#leftwheel li:eq(' + parseInt(n - 2) + ')').html();
$('#bkodate').val(result);
}
});
}
var leftwheel = new iScroll('leftwheel', {
snap: 'li',
momentum: true,
hScrollbar: false,
vScrollbar: false,
onScrollEnd: function() {
test();
}
});
精彩评论