如何制作可水平滚动的导航栏？

<ul class="nav">
  <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>
  <li><a href="#">导航项7</a></li>
  <li><a href="#">导航项8</a></li>
  <li><a href="#">导航项9</a></li>
</ul>

.nav {
  overflow-x: auto; /* 水平滚动 */
  white-space: nowrap; /* 防止导航项换行 */
}

.nav li {
  display: inline-block; /* 横向排列 */
  margin-right: 10px; /* 导航项之间的间距 */
}

.nav li:last-child {
  margin-right: 0; /* 最后一个导航项无间距 */
}

var nav = document.querySelector('.nav');
var navItems = document.querySelectorAll('.nav li');

var totalWidth = 0;
navItems.forEach(function(item) {
  totalWidth += item.offsetWidth;
});

nav.style.width = totalWidth + 'px';