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

试试iScroll 4 by cubiq.org。它可以应用于页面上的任何div，水平，垂直或两个滚动，有一个很好的动画（就像在智能手机上），在webkit和Firefox（其他更糟糕）非常快，最重要的是，它是可定制的。我花了12个小时寻找这样的卷轴，这基本上涵盖了我的所有需求。

Answer 4

看看这个

http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

水平滚动触摸菜单？

4 个答案: