向导航栏添加水平滚动

<div class="navbar">
  <ul>
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
    <li><a href="#">选项4</a></li>
    <li><a href="#">选项5</a></li>
    <li><a href="#">选项6</a></li>
    <!-- 更多导航选项... -->
  </ul>
</div>

.navbar {
  overflow-x: auto;
  white-space: nowrap;
  /* 设置导航栏的宽度，根据实际情况调整 */
  width: 100%;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* 设置导航选项的宽度和间距，根据实际情况调整 */
  width: 800px;
}

.navbar li {
  display: inline-block;
  margin-right: 10px;
}

.navbar li a {
  text-decoration: none;
  color: #000;
  /* 设置导航选项的样式，根据实际情况调整 */
  padding: 5px 10px;
  border: 1px solid #000;
}

var navbar = document.querySelector('.navbar');

navbar.addEventListener('scroll', function() {
  // 根据滚动位置来显示或隐藏滚动条
  if (navbar.scrollLeft > 0) {
    navbar.classList.add('show-scrollbar');
  } else {
    navbar.classList.remove('show-scrollbar');
  }
});