jQuery Mobile 底部导航栏水平滚动

Question

我正在使用JQuery Mobile的页脚定义内的"data-role"为div设置"navbar"。当我添加了5个以上的项目时，它会将菜单项分成两列。根据JQM文档，这是默认行为。我希望在页脚区域内通过左右滑动来滚动图标。

        <div data-role="footer" data-theme="d" data-position="fixed" id="divFooter">
            <div data-role="navbar" id="divNavBar">
                <ul>
                    <li><a href="javascript:;" id="icPortfolio" data-icon="custom">Profile</a></li>
                    <li><a href="javascript:;" id="icStatus" data-icon="custom">Status</a></li>
                </ul>
            </div>
        </div>

参考一下，我查看了这个可能的解决方案：JQM horizontal scroll navbar。然而，它将菜单图标变成了HTML链接，并在头部数据角色中起作用。

有什么想法吗？

- Mr. Smith

---

请注意，标签是独立的。将“horizontal”和“scroll”组合在一起并不意味着与标签“horizontal-scrolling”相同。 - Charles

Answer 1

您需要在父级div（页脚div）上添加以下内容：

overflow: auto;
white-space: nowrap;

现在，nowarp属性使得div的内容不会溢出到下一行，而overflow:auto属性可以让它在需要滚动的方向上滚动，在这种情况下，我们关闭了单词换行，因此滚动方向是水平的。

- krilovich

Answer 2

您可以仅使用HTML/CSS来实现此目标： HTML

<header>
  <nav role='navigation'>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <a href="#" class="nav-toggle">Menu</a>
</header>

CSS (层叠样式表)

nav {
  overflow-x: scroll; /* 1 */
  -webkit-overflow-scrolling: touch; /* 2 */
}

ul {
  text-align: justify; /* 3 */
  width: 30em; /* 4 */
}


ul:after { /* 5 */
  content: '';
  display: inline-block;
  width: 100%;
}

li {
  display: inline-block; /* 6 */
}

评论：

1. 将其设置为自动在某些设备上可以工作，但最好将其设置为滚动。
2. 这是一种神奇的属性，使本地滚动更加流畅。
3. 将其设置为对齐会创建等距的li，使得计算边距不再困难。
4. 必须将宽度设置为大于所有li宽度之和的值。
5. 这是“text-align: justify”的清除浮动版本。
6. 这也必须被设置为等距间隔才能生效。

应该适用于以下设备：

• iOS 5+
• Android 3.0
• Blackberry 6+（个人未经检查）
• Windows Phone（IE10）支持本地动量滚动

摘自此处：http://hugogiraudel.com/2013/08/23/scroll-overflow-menu/

- sashaegorov