2

http://jsbin.com/UREQUbu/1/edit

我的标题中有 9 个按钮。我让水平滚动条工作，但我希望它隐藏，但仍然可以滚动。我发现一个JQuery 插件非常适合在我的笔记本电脑上滚动，但在移动设备上不起作用。

非常感谢有关如何解决此问题的任何帮助。

HTML

<!DOCTYPE html>
<html>

    <head>
        <title>JS Bin</title>
        <meta charset='utf-8'>
        <meta content='yes' name='apple-mobile-web-app-capable'>
        <meta content='default' name='apple-mobile-web-app-status-bar-style'>
        <meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0'
        name='viewport'>
        <link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'>
        <script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
        <script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js'
        type='text/javascript'></script>
        <script src="http://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>
    </head>

    <body>
        <div data-role='page'>
            <div class="header ui-bar-c" id="head1" data-role='header'>
                <div id="headbtns" class="ui-btn-left">
                    <div>
                        <table>
                            <tr>
                                <td><a id="btn1" data-role="button" data-inline="true" data-mini="true">Button 1</a>
                                </td>
                                <td><a id="btn2" data-role="button" data-inline="true" data-mini="true">Button 2</a>
                                </td>
                                <td><a id="btn3" data-role="button" data-inline="true" data-mini="true">Button 3</a>
                                </td>
                                <td><a id="btn4" data-role="button" data-inline="true" data-mini="true">Button 4</a>
                                </td>
                                <td><a id="btn5" data-role="button" data-inline="true" data-mini="true">Button 5</a>
                                </td>
                                <td><a id="btn6" data-role="button" data-inline="true" data-mini="true">Button 6</a>
                                </td>
                                <td><a id="btn7" data-role="button" data-inline="true" data-mini="true">Button 7</a>
                                </td>
                                <td><a id="btn8" data-role="button" data-inline="true" data-mini="true">Button 8</a>
                                </td>
                                <td><a id="btn9" data-role="button" data-inline="true" data-mini="true">Button 9</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                    <h1 style="visibility:hidden;">Text Website Name</h1>
    <a href="#menupanel" data-role="button" data-icon="bars" data-iconpos="notext"
                data-inline="true" class="ui-btn-right">Bars</a>

            </div>
            <div class='content' data-role='content'>Sample text</div>
        </div>
    </body>

</html>

CSS

#headbtns {
    margin-top: -.25em;
    display: inline-block;
    width: 97%;
    overflow-x: hidden;
    overflow-y: hidden;}

#headbtns div {
    width: 100em;
    overflow-x: hidden;
    overflow-y: hidden;}

#headbtns table {
    width: 100%;}

查询：

$(function () {
    $("#headbtns").mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 30);
        event.preventDefault();
    });
});
4

1 回答 1

1

建议采取稍微不同的方法。

不要制作overflow-x那个 div hidden，而是overflow隐藏它的容器。这样它仍然会有一个滚动条（一个不可见的），您可以继续在手机上使用滑动手势。

JS Bin 演示

#headbtns {
    overflow-x: scroll;  /* Changed */

#head1 {
  overflow: hidden;      /*  Added  */
}
于 2013-09-01T04:50:11.713 回答