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

尝试这个。是你要找的吗？

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 回答
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 回答
3

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

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

http://cubiq.org/iscroll-4

于 2012-11-26T14:02:31.307 回答
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 回答