My goal is to develop a website optimized for tablets, specifically iOS devices, with swipe navigation between pages. I've attempted to achieve this by moving the page in relation to the touch location and then using scrollLeft on touchend to position the container at the page. Below is the code snippet:
$(function() {
var xScreenStartPos, xScrollStartPos;
xScrollStartPos = 0;
xScreenStartPos = 0;
$(document).on('touchstart', '.page', function(e) {
xScreenStartPos = $(this).parent().scrollLeft();
xScrollStartPos = e.originalEvent.touches[0].pageX;
});
$(document).on('touchmove', '.page', function(e) {
var deltaX, xPos;
e.preventDefault();
xPos = e.originalEvent.touches[0].pageX;
deltaX = xScrollStartPos - xPos;
if ((deltaX > 50 || deltaX < -50) && scrollingVertical === false && menuOpen === false) {
$(this).parent().scrollLeft(xScreenStartPos + deltaX);
}
});
$('.page').on('touchend', function() {
var previousPage;
previousPage = void 0;
$('.page:in-viewport').each(function() {
if ($(this) !== previousPage && $(this).offset().left < 512 && $(this).offset().left > -511) {
$(this).parent().animate({
scrollLeft: $(this).parent().scrollLeft() + $(this).offset().left
}, 250);
}
});
});
});
Despite my efforts, I've noticed that this approach results in jittery and sluggish navigation, rather than the smooth user experience I aim for. I'm seeking a solution that replicates the seamless navigation seen when swiping between pages on an iPad home screen. While I understand it won't be identical to the native experience, any guidance on achieving a better solution would be greatly appreciated.