Question

我想知道，是否可以通过单击并拖动内容来滚动内容，就像用手指在iPhone上一样？

Here's a Jscrollpane example on jsfiddle

我考虑过将滚动条扩展到整个区域并使其不可见，但我想在内部维护图层点击功能。

<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');，但由于某种原因这不起作用。但是，我认为如果改变得当 - 这可能会奏效。有什么想法吗？

Answer 1

扩展滚动条并使其不可见。我很确定这比你提出的要难得多。它可能已经完成了一百万次，并且可能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/

Answer 2

试试这个。这是你在找什么？

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();
                }
            }

Answer 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
})

Answer 4

不是真正的答案，因为它没有描述调整jScrollPane，但是我建议使用名为iScroll的<令人难以置信的强大的插件， IF 它是一个切换插件的选项。

它完成相同的工作，让你自定义滚动条（与jScrollPane一样），与移动浏览器兼容，在可用时使用硬件加速CSS转换，在容器中保留点击功能等。

http://cubiq.org/iscroll-4

通过拖动容器内的内容来滚动Jscrollpane？

4 个答案: