Issue with Hidden Horizontal Scrollbar Functionality in JQuery Mobile Not Resolving

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();
    });
});

Answer №1

Consider approaching the situation from a different angle.

Instead of setting the overflow-x property of the div to hidden, try setting the container's overflow property to hidden. This way, the div will still have a scrollbar (although invisible) and you can continue using sliding gestures on mobile devices.

See JS Bin Demo for reference

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disappearance of icon upon hovering in CSS

I am currently working with Angular JS (1.x) and I have a requirement to display tooltip text when hovering over an info icon. The tooltip text appears properly, but the issue is that the icon disappears when hovered over. It reappears once the hover is re ...

Ways to format table using flex-wrap sans the use of flexbox

My HTML and CSS structure is as follows: .item { background: white; padding: 5px; display: inline-block; text-align: center; } .item > div { background: yellow; width: 60px; height: 60px; border-radius: 50%; display: table-cell; ...

Using ng-bind-html within a ng-repeat loop

Currently, I am working on developing a custom autosuggest feature where a web service is queried with a search term to retrieve a list of suggestions that are then displayed. My main obstacle lies in trying to highlight the matching term within the sugges ...

How can Angular display an alert when no items are visible?

I want to display a message saying "Item doesn't exist" when the item is not found. Suppose this is my list: user 0 user 1 user 2 The following code displays the list above: <ng-container *ngFor="let user of users | async; let i = index"> ...

Javascript code experiences a shift in two different styles within a single conditional statement

I'm new to web design and I'm having trouble getting this code to work properly. Can anyone help me fix it so that both styles are applied correctly? // Access the sign_up modal window var modal = document.getElementById('id01'); // A ...

Design a circular text element using Tailwind CSS

Just starting out as a web developer and running into some issues with Tailwind CSS. Here's what I'm trying to achieve: https://ibb.co/KL8cDR2 This is the code I have right now: <div class="w-1/2 h-10 rounded-full bg-gray-400" style ...

The -webkit-background-clip feature seems to be malfunctioning in Safari

I am experiencing an issue where the code works perfectly on Chrome but fails to function properly on Safari. I have been unable to pinpoint the cause of this discrepancy and any assistance or insights would be greatly appreciated. For those interested, a ...

href not functioning properly on subsequent clicks, whereas onclick remains active

I'm experiencing an issue with a button that opens a modal. When clicking the button, it's supposed to open a new page in the modal and also make an API call for processing before loading the new page. <a class="btn btn-primary" type='b ...

Unlocking the Power of Transition: Effortlessly Submitting a Form Post

After the modal finishes fading out, I want my form to be submitted and sent to the email file "refreshform.php". However, currently after the modal fades out, the form does not submit or post anything to the PHP file for sending the email. It simply fades ...

Utilizing fab-icons with CDN in Next.js version 13.4

Currently, I am working with the latest version of Next.js (13.4) and I would like to incorporate a single Icon into my project using Font Awesome CDN to avoid increasing the overall app size. However, when I include the following code snippet in my layou ...

What is the best way to add margins to the elements in a row without disrupting the row layout?

I'm trying to figure out how to add margin between elements in my code snippet without breaking the row. You can view the fiddle here. Although a similar question has been asked on Stack Overflow here, I wasn't able to find a solution that works ...

Is it possible to increase the delay in the nth-child selector?

I'm attempting to create a compact checklist that displays in a single row with items appearing sequentially. To achieve this, I utilized the :nth-child() selector in CSS as shown below: .animated { -webkit-animation-duration: 0.8s; animation-d ...

Tips for aligning a search bar to the right position

How can I align the search bar to the right? I've attempted various methods but nothing seems to be working. I would like the 'Transaction' title to be on the left side of the card and the search bar on the right side. This is the code snip ...

WordPress CSS & JS files failing to enqueue properly

My attempt to integrate my CSS and JS files with WordPress has not been successful. Although my CSS works through the Custom CSS tab, this is not an ideal solution. Below is the code from my functions.php file for your reference. Can you help me troublesho ...

The request for http://localhost:3000/insert.js was terminated due to a 404 (Not Found) error

As someone new to web development, I am currently tackling a project where I'm having trouble loading the Javascript file insert.js. The HTML document upload.html resides in the public folder, while the Javascript file is located in the main folder. I ...

Icon toggling menu bug

I recently designed a menu featuring an animated icon that, when clicked, opens with two columns. The issue I'm facing is that after clicking on a link in the right column (view JSFiddle), the menu disappears but requires two additional clicks on the ...

Utilizing d3 Charts in Angular 4 Framework

I need assistance with integrating a bar chart in an Angular 4 project, which includes HTML and TypeScript files as components. Can someone please provide guidance on this? The bar chart should show the increase in the number of employees each month, star ...

What are the steps to troubleshoot CSS issues in NextJS?

Currently, I am encountering challenges while trying to integrate markdown with CSS. The problem I am facing has been replicated in the link provided: https://codesandbox.io/s/react-quilljsbasic-forked-3rcxw?file=/src/App.js ...

Provide a spider with unadulterated HTML rather than setting off AJAX requests

While my website is being crawled, which PHP function should I utilize to ensure that even if ajax isn't activated, my content still gets transmitted? PHP doesn't have the ability to determine if ajax is supported. Objective: Provide the crawle ...

My goal is to create collapsible and expandable rows within this table

Discover the code snippet here, without pasting the entire content... As an illustration, let's utilize this example: <head> </head> <body> <table> <tr> <th></th> < ...