2

http://jsbin.com/UREQbu/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%;}

Jクエリ：

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

1 に答える 1

1

少し違ったアプローチを取ることをお勧めします。

overflow-xその div を作成しないhiddenで、そのコンテナーをoverflow非表示にします。そうすれば、スクロールバー (目に見えないもの) が残り、モバイルでスライド ジェスチャを使い続けることができます。

JS ビンのデモ

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

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