4

iPhoneで指を使ったときのように、コンテンツをクリックしてドラッグすることでコンテンツをスクロールできるでしょうか。

これがjsfiddleのJscrollpaneの例です

スクロールバーを領域全体に拡張して非表示にすることを考えましたが、内部のレイヤークリック機能を維持したいと思います。

<div id="maincontainer">
    <div id="MenuList" class="scroll-pane">
        <div id="somelayer-one" onclick="alert('Jquery Function');">text</div>
</div></div>

これは可能ですか？ありがとう！

追加情報

私は元のプラグインを調べて、これを変更しようとしました：

function initialiseVerticalScroll()
            {
                if (isScrollableV) {

                    container.append(
                        $('<div class="jspVerticalBar" />').append(
                            $('<div class="jspCap jspCapTop" />'),
                            $('<div class="jspTrack" />').append(
                                $('<div class="jspDrag" />').append(
                                    $('<div class="jspDragTop" />'),
                                    $('<div class="jspDragBottom" />')
                                )
                            ),
                            $('<div class="jspCap jspCapBottom" />')
                        )
                    );

                    verticalBar = container.find('>.jspVerticalBar');
                    verticalTrack = verticalBar.find('>.jspTrack');
                    verticalDrag = verticalTrack.find('>.jspDrag');

                    if (settings.showArrows) {
                        arrowUp = $('<a class="jspArrow jspArrowUp" />').bind(
                            'mousedown.jsp', getArrowScroll(0, -1)
                        ).bind('click.jsp', nil);
                        arrowDown = $('<a class="jspArrow jspArrowDown" />').bind(
                            'mousedown.jsp', getArrowScroll(0, 1)
                        ).bind('click.jsp', nil);
                        if (settings.arrowScrollOnHover) {
                            arrowUp.bind('mouseover.jsp', getArrowScroll(0, -1, arrowUp));
                            arrowDown.bind('mouseover.jsp', getArrowScroll(0, 1, arrowDown));
                        }

                        appendArrows(verticalTrack, settings.verticalArrowPositions, arrowUp, arrowDown);
                    }

                    verticalTrackHeight = paneHeight;
                    container.find('>.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow').each(
                        function()
                        {
                            verticalTrackHeight -= $(this).outerHeight();
                        }
                    );


                    verticalDrag.hover(
                        function()
                        {
                            verticalDrag.addClass('jspHover');
                        },
                        function()
                        {
                            verticalDrag.removeClass('jspHover');
                        }
                    ).bind(
                        'mousedown.jsp',
                        function(e)
                        {
                            // Stop IE from allowing text selection
                            $('html').bind('dragstart.jsp selectstart.jsp', nil);

                            verticalDrag.addClass('jspActive');

                            var startY = e.pageY - verticalDrag.position().top;

                            $('html').bind(
                                'mousemove.jsp',
                                function(e)
                                {
                                    positionDragY(e.pageY - startY, false);
                                }
                            ).bind('mouseup.jsp mouseleave.jsp', cancelDrag);
                            return false;
                        }
                    );
                    sizeVerticalScrollbar();
                }
            }

に変更verticalDrag = verticalTrack.find('>.jspDrag');しましたがverticalDrag = verticalTrack.find('>#somelayer-one');、なんらかの理由でうまくいきませんでした。ただし、適切に変更すれば、これでうまくいくかもしれないと思います。何か案は？

4

4 に答える 4

4

スクロールバーを拡張して非表示にします。それはあなたが求めていることよりも達成するのがはるかに難しいだろうと私はかなり確信しています。それはおそらく何百万回も行われており、おそらくdraggable（）は機能するでしょう...しかしプラグインなしで：

CSS 

#maincontainer
{
    position:absolute;
}​

jQuery

$('#maincontainer').on('mousedown', function(e){
    $(this).data('held', e.screenY - $(this).offset().top);
}).on('mouseup', function(){
    $(this).data('held', false);
}).on('mousemove', function(e){
    if ($(this).data('held')!=false) $(this).css({top:e.screenY - $(this).data('held')});
});​

編集：あなたのhtmlを使用して、このhttp://jsfiddle.net/apDrX/1/

于 2012-11-23T20:03:44.797 に答える
4

これを試して。それはあなたが探しているものですか？

function initialiseVerticalScroll()
            {
                if (isScrollableV) {

                    container.append(
                        $('<div class="jspVerticalBar" />').append(
                            $('<div class="jspCap jspCapTop" />'),
                            $('<div class="jspTrack" />').append(
                                $('<div class="jspDrag" />').append(
                                    $('<div class="jspDragTop" />'),
                                    $('<div class="jspDragBottom" />')
                                )
                            ),
                            $('<div class="jspCap jspCapBottom" />')
                        )
                    );

                    verticalBar = container.find('>.jspVerticalBar');
                    /* ADDED CODE */
                    verticalBar.width(0);
                    /* ADDED CODE */
                    verticalTrack = verticalBar.find('>.jspTrack');
                    verticalDrag = verticalTrack.find('>.jspDrag');

                    if (settings.showArrows) {
                        arrowUp = $('<a class="jspArrow jspArrowUp" />').bind(
                            'mousedown.jsp', getArrowScroll(0, -1)
                        ).bind('click.jsp', nil);
                        arrowDown = $('<a class="jspArrow jspArrowDown" />').bind(
                            'mousedown.jsp', getArrowScroll(0, 1)
                        ).bind('click.jsp', nil);
                        if (settings.arrowScrollOnHover) {
                            arrowUp.bind('mouseover.jsp', getArrowScroll(0, -1, arrowUp));
                            arrowDown.bind('mouseover.jsp', getArrowScroll(0, 1, arrowDown));
                        }

                        appendArrows(verticalTrack, settings.verticalArrowPositions, arrowUp, arrowDown);
                    }

                    verticalTrackHeight = paneHeight;
                    container.find('>.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow').each(
                        function()
                        {
                            verticalTrackHeight -= $(this).outerHeight();
                        }
                    );


                    verticalDrag.hover(
                        function()
                        {
                            verticalDrag.addClass('jspHover');
                        },
                        function()
                        {
                            verticalDrag.removeClass('jspHover');
                        }
                    ).bind(
                        'mousedown.jsp',
                        function(e)
                        {
                            // Stop IE from allowing text selection
                            $('html').bind('dragstart.jsp selectstart.jsp', nil);

                            verticalDrag.addClass('jspActive');

                            var startY = e.pageY - verticalDrag.position().top;

                            $('html').bind(
                                'mousemove.jsp',
                                function(e)
                                {
                                    positionDragY(e.pageY - startY, false);
                                }
                            ).bind('mouseup.jsp mouseleave.jsp', cancelDrag);
                            return false;
                        }
                    );
                    /* ADDED CODE */
                    container.bind("mousedown.jsp", function (e) 
                { 
                    // Stop IE from allowing text selection
                    $('html').bind('dragstart.jsp selectstart.jsp', nil);

                    var startY = verticalDrag.position().top;
                    var initialY = e.pageY;
                    $('html').bind(
                        'mousemove.jsp',
                        function(e)
                        {
                            positionDragY(startY - (e.pageY - initialY), false);
                        }
                    ).bind('mouseup.jsp mouseleave.jsp', cancelDrag);
                    return false;
                });
                    /* ADDED CODE */
                    sizeVerticalScrollbar();
                }
            }
于 2012-12-01T17:31:29.243 に答える
3

これを試して：

http://jsfiddle.net/kHvHb/5/

​var scroll = $('.scroll-pane').jScrollPane();
var api = scroll.data('jsp');


$('.jspPane div').mouseup(function(){
    var miY = $(this).position().top + $('.jspPane').position().top
    console.log( $('.jspPane').position().top);
    api.scrollTo(0,miY);
    return false
})

​
于 2012-11-23T20:00:42.730 に答える
3

jScrollPaneの調整については説明されていないため、実際には答えではありませんが、プラグインを切り替えるオプションである場合は、iScrollと呼ばれる（信じられないほど強力な）プラグインを使用することをお勧めします。

それはほとんど同じ仕事をします、あなたはスクロールバーをカスタマイズしましょう（jScrollPaneと同じように）、モバイルブラウザと互換性があり、利用可能な場合はハードウェアアクセラレーションされたCSS変換を使用し、そのコンテナにクリック機能を保持します、など。

http://cubiq.org/iscroll-4

于 2012-11-26T14:02:31.307 に答える