水平滚动触摸菜单？

Question

我正在构建一个移动网站，客户希望顶部有一个菜单栏。菜单很宽，所以他希望通过左右拖动来水平滚动。 app.ft.com 具有类似的功能（尽管您必须在 iPhone 上查看它才能看到它的工作原理）

有谁知道可以实现此目的的 jQuery / jqTouch 脚本吗？我尝试过scrollTouch，但只能滚动整个页面，而不仅仅是菜单。

Answer 1

我为 jQuery Mobile 编写了一个带有图像的简单水平导航栏，您可以通过在移动设备上向左或向右拖动它来滚动该导航栏。这个例子非常粗略，但它会给你一个总体思路。标记如下：

CSS：

<style type="text/css">
#navBar
{
    white-space: nowrap;
    height: 55px;
    width: 100%;
    position: relative;
}
</style>

HTML 标记：

<div id="navBar">
    <div style="left: 0%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav1" />
        <br />
        <span style="font-size: 80%">Nav1</span>
    </div>
    <div style="left: 40%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav2" />
        <br />
        <span style="font-size: 80%">Nav2</span>
    </div>
    <div style="left: 80%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav3" />
        <br />
        <span style="font-size: 80%">Nav3</span>
    </div>
    <div style="left: 120%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav4" />
        <br />
        <span style="font-size: 80%">Nav4</span>
    </div>
    <div style="left: 160%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav5" />
        <br />
        <span style="font-size: 80%">Nav5</span>
    </div>
    <div style="left: 200%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav6" />
        <br />
        <span style="font-size: 80%">Nav6</span>
    </div>
</div>

JavaScript：

<script type="text/javascript" language="javascript">
    var bMouseDown = false;
    var bMouseUp = true;
    var iStartPixelsX = 0;
    var iCurrentNavbarPixelsX = 0;
    var changePixels = 0;
    var leftMostOffsetPixels = 0;

    function funcMoveNavBar(pixels) {
        $("#navBar").attr("style", "left: " + pixels + "px;");
    }

    var onOrientationChange = function () {
        setTimeout(function () {
            funcMoveNavBar(0);
            iStartPixelsX = 0;
            iCurrentNavbarPixelsX = 0;
            changePixels = 0;
            leftMostOffsetPixels = $("#navBar div").last().offset().left + $("#navBar div").last().width();
        }, 500);
    }

    $(document).ready(function () {
        leftMostOffsetPixels = $("#navBar div").last().offset().left + $("#navBar div").last().width();

        if (window.addEventListener) {
            window.addEventListener("orientationchange", onOrientationChange, false);
        } else if (window.attachEvent) {
            window.attachEvent("onorientationchange", onOrientationChange);
        }

        $("#navBar").bind("vmousedown", function (e) {
            bMouseDown = true;
            bMouseUp = false;

            iStartPixelsX = e.pageX;
        });

        $("#navBar").bind("vmousemove", function (e) {
            if (bMouseDown && !bMouseUp) {
                e.preventDefault();
                changePixels = (e.pageX - iStartPixelsX) + iCurrentNavbarPixelsX;

                funcMoveNavBar(changePixels);
            }
        });

        $("#navBar").bind("vmouseup", function (e) {
            bMouseUp = true;
            bMouseDown = false;

            if (changePixels > 0) {
                funcMoveNavBar(0);
                changePixels = 0;
                iCurrentNavbarPixelsX = 0;
            } else if (($("#navBar div").last().offset().left + $("#navBar div").last().width()) < $("#navBar").width()) {
                funcMoveNavBar($("#navBar").width() - leftMostOffsetPixels);
                iCurrentNavbarPixelsX = $("#navBar").width() - leftMostOffsetPixels;
                changePixels = $("#navBar").width() - leftMostOffsetPixels;
            } else {
                iCurrentNavbarPixelsX = changePixels;
            }
        });
    });
</script>

请记住，在 jQuery Mobile 中启用 AJAX 导航时，不建议使用 $(document).ready()，因此您可能需要定制此解决方案以满足您自己的需求。

Answer 2

纯 CSS 解决方案，利用移动浏览器不创建任何滚动条的事实。内部的某种视觉引导和自动宽度会很好，但并不总是需要。

JSFiddle 可以使用 http://jsfiddle.net/KaGrc/1

CSS：

#outer {
    width: 100%;
    overflow: auto;
}

#inner {
    width: 800px;
}

HTML：

<div id="outer">
    <div id="inner">
        content1 content2 content3 content4 content5 content6 content7 content8 content9 content10 content11 content12
    </div>
</div>

Answer 3

尝试cubiq.org 的 iScroll 4。它可以应用于页面上的任何 div，水平、垂直或双向滚动，有一个漂亮的动画（就像在智能手机上一样），在 webkit 和 Firefox 中速度非常快（其他的更糟），最重要的是，它是相当可定制的。我花了 12 个小时寻找这样的滚动条，这基本上满足了我的所有需求。

Answer 4

看看这个

http://plugins.jquery.com/project/ Touchwipe-iPhone-iPad-擦拭手势