http://jsbin.com/UREQUbu/1/edit
I have a header with 9 buttons. I managed to get the horizontal scrollbar to work, but I want it hidden yet still scrollable. I came across a JQuery plugin that worked perfectly for scrolling on my laptop, but unfortunately, it doesn't work on mobile devices.
Any suggestions on how to resolve this issue would be highly 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();
});
});