Question

我正在为平板电脑网站设计导航栏。导航栏包含水平显示的元素，我希望能够在不移动窗口的情况下使用滑动（类似于封面流）显示新元素。这是我现在使用的代码（jQuery Mobile）：

//Tablet Features
        $('#navHolder').bind('swipe', 
            function(e) {
              $('#navHolder').animate({left:thisLeft - 100});
            }
        );

我不认为我可以在没有首先禁用滚动的情况下触发swipe，但我对所有建议持开放态度。请帮忙。

Answer 1

将要滚动的元素的父容器设置为overflow : hidden，这样就不会显示滚动条。然后swipe事件应该可以正常工作，因为您将无法使用本机滚动来滚动内容。

HTML -

    <div id="navHolder-container">
        <div id="navHolder">
            <p>content in here</p>
        </div>
    </div>

CSS -

#navHolder {
    position : absolute;
    width    : 1000px;
}
#navHolder-container {
    position : relative;
    overflow : hidden;
    height   : 100px;
    width    : 100%;
}

JS -

$(function () {
    var convert = {
            swipeleft  : '-=100',
            swiperight : '+=100'
        };
    $('#navHolder-container').bind('swipeleft swiperight', function(e) {
        $('#navHolder').animate({ left: convert[e.type]});
    });
});

以下是演示：http://jsfiddle.net/B8PQn/1/

试图为平板电脑网站制作导航栏

1 个答案: