iPad translate3d Scroller недостаточно естественный

0

Я создал скрипт прокрутки для инструментария, над которым я работаю, но он dosnt кажется достаточно естественным, я не уверен, как сделать его более плавным, может быть, кто-то может мне помочь :)

код! :)

var startX, offsetX, extraX, diffX, newX, thisElement = $("#productContainer");     
thisElement[0].addEventListener("touchstart", function(e) {
offsetX = ($(window).width()-thisElement.outerWidth(true));
startX = e.targetTouches[0].pageX - offsetX;
console.log("offsetX: "+offsetX+" | "+"startX: "+startX);
}, false);
thisElement[0].addEventListener("touchmove", function(e) {
e.preventDefault();
getTransform();

diffX = Math.floor(((startX - e.changedTouches[0].pageX) + offsetX)/30);
currentX = results[5];
extraX = 60;

newX = currentX-diffX;

if(newX < offsetX)
newX = offsetX;
else if(newX > 0)
newX = 0;

thisElement.css("-webkit-transform", "translate3d("+newX+"px, 0, 0)");
}, false);

function getTransform() {
    results = $("#productContainer").css('-webkit-transform').match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/);

    if(!results) return [0, 0, 0];
    if(results[1] == '3d') {
    return results.slice(2,5);
}

    results.push(0);
    return results.slice(5, 8);
}
Теги:
css-transitions

1 ответ

0

Я настоятельно рекомендую вам использовать плагин swipe.js для jQuery.

Таким образом, сенсорное обнаружение будет реально 100%, а слайдер будет следовать за вашим пальцем, как это происходит с родными мобильными приложениями.

Очень прост в использовании.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню