如何在没有滚动条的情况下创建水平可滑动菜单？

debugcn 发表于 Dev

菲尔

我想在我的移动网站上有一个可滑动的水平菜单，就像Google在其结果页面上使用的那样。我用基本的html / css创建了一个，效果很好，但是我不能摆脱滚动条...

这是代码：

<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>

任何想法？

在这里查看我的菜单

在这里查看Google示例

用户名

您可以制作一个包含<div>滚动内容的容器元素<div>。
该父<div>样式可以设置为：oveflow:hidden并且其大小小于其子<div>样式，该子样式的子样式设置为overflow:scroll。
这样，滚动条被隐藏了，您不必担心使用JavaScript进行操作。然而：

建议您在<style>元素或单独的CSS文件中创建CSS类，在其中可以定义这些类，并在HTML中使用这些类，例如：<div class="menu">...

按照上面的示例使用内联CSS会导致代码难以管理，尤其是在大型项目中

更新

这是一个完整的例子：

<html>
    <head>
        <style>
            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;
            }
        </style>
    </head>
    <body>
        <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>
    </body>
</html>

预览：（部分屏幕截图）