Mobiles / Tactiles Écrans de défilement horizontale sur balayez
Cette question a été posée après une discussion détaillée sur les cette SORTE de question
Problème:
J'ai besoin d'un défilement horizontal qui peut faire défiler à l'aide de la souris, faites glisser sur les ordinateurs de bureau et faites glisser les événements sur des écrans tactiles
Solution Possible:
J'ai essayé d'utiliser le jQuery dragscrollable qui fonctionne bien sur les ordinateurs de bureau, mais pas sur la touche des périphériques compatibles
Alors j'ai continué à explorer Touche De Balayage Plugin Jquery et est venu avec une solution possible à JSFiddle Code et le résultat pour le JSFiddle peut être trouvé ici
Vous pouvez également trouver un travail de démonstration à ici
Mon code java script est comme suit
//to detect if device has touch enabled
var is_touch_device = 'ontouchstart' in document.documentElement;
$(function()
{
$('.myClass').dragscrollable();
//if touch is enabled then we have to map the swipe event
if(is_touch_device)
$('.panel_list').swipe( { swipeStatus:scroll_panel_list, allowPageScroll:'horizontal' } );
function scroll_panel_list(event, phase, direction, distance)
{
var pos = $('.myClass').scrollLeft();
if(direction == 'left')
{
$('.myClass').animate({scrollLeft: pos + 200} );
}
if(direction == 'right')
{
$('.myClass').animate({scrollLeft: pos - 200} );
}
}
});
Je l'ai testé, il fonctionne très bien sur Android navigateur, mais pas très reponsive sur iPhone.
Quelqu'un peut-il m'aider à trouver une meilleure solution ? Je suis en utilisant twitter bootstrap
EDIT:1
Bien maintenant, je suppose que je pourrais avoir trouvé un joli plugin qui semble bien fonctionner sur les ordinateurs de bureau et de toucher les appareils compatibles, le plugin est appelé jquery.dragscroll, j'ai une mise à jour de la démo ici
EDIT:2
Il semble y avoir un autre plugin qui a un support pour les périphériques tactiles, il est appelé Overscroll. Je n'ai pas évalué encore
pour l'instant je serai plus qu'heureux si elle fonctionne principalement sur les Appareils iOS et les appareils Android !! Découvrez ma mise à jour de la solution et crois-moi savoir ce que vous en pensez !!
La accepté de répondre à cette question pointe vers un lien mort.
OriginalL'auteur Anand Sunderraman | 2012-08-08
Vous devez vous connecter pour publier un commentaire.
En outre, il est "Swipeview" script
http://cubiq.org/swipeview
OriginalL'auteur Playforward
C'est possible avec
http://labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html
OriginalL'auteur rfourg
J'ai trouvé une vieille solution et l'a modifié pour le défilement horizontal. Je l'ai testé sur Android google Chrome et apple Safari et l'écouteur d'événements tactiles ont été autour d'un long temps, de sorte qu'il a un bon soutien: http://caniuse.com/#feat=touch.
Utilisation:
Fonctions:
Verticale initiale à un doigt touche de défilement:
http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/
Verticale a maintenant simplifié CSS solution ne fonctionne pas pour horizontal DIV défiler sur mobile:
La question demande aussi souris-saisir sur ordinateur de bureau, ce qui peut être accompli avec de belles Défiler, et fonctionne en tandem avec ma solution ci-dessus si vous en avez besoin:
https://github.com/inuyaksa/jquery.nicescroll
OriginalL'auteur Steve Seeger