Ok, got it kinda working by setting the axis, although still buggy on my old iPhone:
if (scroll) {
$.scrollTo(scroll, {
target: '#container',
duration: 750,
axis:'x'
});
}
Frage
I am using the following to create next/previous buttons in the footer of this page:
function scroll(direction) {
var scroll, i,
positions = [],
here = $(window).scrollLeft(),
collection = $('.block');
collection.each(function() {
positions.push(parseInt($(this).offset()['left'],10));
});
for(i = 0; i < positions.length; i++) {
if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
}
if (scroll) {
$.scrollTo(scroll, {
duration: 750
});
}
return false;
}
$("#next,#prev").click(function() {
return scroll($(this).attr('id'));
});
I grabbed this code from this source.
It works a treat in Chrome and Safari, but not on iPhones and iPads. Clicking on the arrows I get image jumping/flickering with no scrolling.
Any tips? Thanks!
EDIT
I also tried the following, after reading that iPads don't like $(window).scrollLeft();
and IE8 doesn't like window.pageXOffset;
:
if ( agent.match(/(iPhone|iPod|iPad)/) ) {
here = window.pageXOffset;
} else {
here = $(window).scrollLeft();
}
As well as this when I read that iPads don't scroll the body
element:
if (scroll) {
$.scrollTo(scroll, {
target: '#container',
duration: 750
});
}
But still doesn't work on iPad/iPhone.
Lösung
Ok, got it kinda working by setting the axis, although still buggy on my old iPhone:
if (scroll) {
$.scrollTo(scroll, {
target: '#container',
duration: 750,
axis:'x'
});
}