3

この質問は、このSOの質問に関する詳細な議論の後に尋ねられました

問題：

デスクトップでマウスドラッグを使用してスクロールし、タッチ対応画面でイベントをスワイプできる水平スクロールが必要です

考えられる解決策:

デスクトップでは正常に動作しますが、タッチ対応デバイスでは動作しない jQuery dragscrollable を使用してみました

そこで、Touch Swipe Jquery Pluginの調査に進み、 JSFiddle コードで可能な解決策を思いつきました。JSFiddle の結果は、ここで見つけることができます。

また、動作するデモをここで見つけることができます

私のJavaスクリプトコードは次のとおりです

//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} );
                    }
                }    
            });​

Android ブラウザでは問題なく動作することをテストしましたが、iPhone ではあまり反応しません。

誰かがより良い解決策を考え出すのを手伝ってくれますか? Twitterブートストラップを使用しています

編集:1

さて、デスクトップとタッチ対応デバイスで正常に動作するように見える素敵なプラグインを見つけたのではないかと思います。プラグインはjquery.dragscrollと呼ばれ、更新されたデモがここにあります

編集：2

タッチ対応デバイスをサポートする別のプラグインがあるようで、 Overscrollと呼ばれます。まだ評価してない

4

3 に答える 3

2

さらに、「Swipeview」スクリプトがあります http://cubiq.org/swipeview

于 2013-01-22T01:25:00.417 に答える
1

古いソリューションを見つけて、水平スクロール用に修正しました。私は Android Chrome と iOS Safari でテストしましたが、リスナーのタッチ イベントは長い間使用されているため、十分にサポートされています: http://caniuse.com/#feat=touch。

使用法：

touchHorizScroll('divIDtoScroll');

機能：

function touchHorizScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollLeft+event.touches[0].pageX;              
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollLeft=scrollStartPos-event.touches[0].pageX;              
        },false);
    }
}
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

オリジナル縦長ワンフィンガータッチスクロール：

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

Vertical には単純化された CSS ソリューションが含まれるようになりましたが、モバイルでの水平 DIV スクロールでは機能しません。

-webkit-overflow-scrolling: touch

この質問では、デスクトップでのマウスグラブも求めています。これは Nice Scroll で実行でき、必要に応じて上記の私のソリューションと連携して機能します。

https://github.com/inuyaksa/jquery.nicescroll

var nice = $("#mydiv").getNiceScroll({horizrailenabled: true, hwacceleration: true});
于 2016-02-29T18:40:33.623 に答える
0

これは可能です

http://labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html

$('body').swipe({
        swipe: function(event, direction, distance, duration, fingerCount) {
            switch (direction) {
                case 'left':
                    // Code here
                    break;
                case 'right':
                   //Code here
                   break;
            }
        },
        allowPageScroll: "vertical"
    });
于 2014-05-09T14:36:24.947 に答える