CODEWITHSUNDEEP
htmlcssjquery-mobile
Michael Schwartz
Michael Schwartz

Reputation: 8415

Hidden Horizontal Scrollbar not working on JQuery Mobile

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

I have 9 buttons in my header. I got the horizontal scrollbar to work, but I want it hidden, but still scrollable. I found a JQuery plugin that worked perfectly for scrolling on my laptop, but on does not work on mobile.

Any help on how to fix this is greatly appreciated.

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%;}

JQuery:

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

Upvotes: 2

Views: 3018

Answers (1)

Itay
Itay

Reputation: 16777

It's advisable to take a slightly different approach.

Don't make the overflow-x of that div hidden, but make its container overflow hidden. That way it'll still have a scrollbar (an invisible one) and you can keep using the sliding gestures on mobiles.

JS Bin Demo

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

#head1 {
  overflow: hidden;      /*  Added  */
}

Upvotes: 1

Related Questions