How to create horizontal swipeable menu without scrollbar?

Question

I want to have a swipeable horizontal menu on my mobile website, just like Google uses on it's results page. I created one with basic html/css, which works fine but I cannot get rid of the scroll bar...

Here's the code:

<div style=" -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-user-select: none; display: block; height: 50px; overflow-y: hidden; padding: 0px; position: relative; -webkit-overflow-scrolling: touch; overflow-x: scroll;">
          <div style="display: inline-block; position: relative; white-space: nowrap; overflow: hidden;">
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
          </div>
     </div>

Any idea?

See my menu here

See Google example here

Answer 1

You can make a container <div> element that holds the scrolling <div>.
This parent <div> style can be set to: oveflow:hidden and its size smaller than its child <div> -of which the style is set to overflow:scroll.
This way the scrollbar is hidden and you need not worry about doing this with JavaScript; however:

• It is recommended that you create your CSS classes in either a <style> element, or a separate CSS file in which you can define these classes, and use these classes in your HTML like: <div class="menu">...

Using inline CSS as per the example above renders unmanageable code, especially in larger projects

Update

Here's a full example:

div
{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.scrollHider
{
    display:inline-block;
    width:302px;
    height:162px;
    overflow:hidden;
    border:1px solid #AAA;
}

.menuBox
{
    width:315px;
    height:175px;
    overflow:scroll;
    white-space:nowrap;
}

.menuSection
{
    width:300px;
    height:160px;
    display:table-cell;
    overflow:hidden;
}

.menuItem
{
    width:300px;
    height:40px;
    text-align:center;
    padding:10px;
    border:1px solid #AAA;
}

<div class="scrollHider">
    <div class="menuBox">
        <div class="menuSection">
            <div class="menuItem">ITEM 1</div>
            <div class="menuItem">ITEM 2</div>
            <div class="menuItem">ITEM 3</div>
            <div class="menuItem">ITEM 4</div>
        </div>
        <div class="menuSection">
            <div class="menuItem">ITEM 5</div>
            <div class="menuItem">ITEM 6</div>
            <div class="menuItem">ITEM 7</div>
            <div class="menuItem">ITEM 8</div>
        </div>
    </div>
</div>

Preview: (partial screenshot)

The preview (above) shows where it is scrolled to the right. Copy & paste the code above in an empty HTML file, save & open in web browser. You can also click it and use keyboard arrows to scroll if you're not using a phone/touch-screen.