卡卡網(wǎng)

使用溢出滾動構(gòu)建響應(yīng)式水平導(dǎo)航，該滾動自動將活動導(dǎo)航鏈接滾動到視圖中。響應(yīng)部分是導(dǎo)航鏈接水平滾動，在所有視口中都可以很好地縮放。滾動部分和活動鏈接設(shè)置是在 JS 中完成的。

這是最終演示。

demodownload

以下是實現(xiàn)內(nèi)容。對于 HTML，使用 a <nav>、<ul>和 nav 鏈接。<nav>是滾動的，而<ul>始終保持單行的鏈接。

<header>
  <h1>Demo</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">World</a></li>
      <li><a href="#">Politics</a></li>
      <li><a href="#">Business</a></li>
      <li><a href="#">Opinion</a></li>
      <li><a href="#" class="active">Tech</a></li>
      <li><a href="#">Science</a></li>
      <li><a href="#">Health</a></li>
      <li><a href="#">Sports</a></li>
      <li><a href="#">Arts</a></li>
      <li><a href="#">Books</a></li>
      <li><a href="#">Style</a></li>
      <li><a href="#">Food</a></li>
      <li><a href="#">Travel</a></li>
    </ul>
  </nav>
</header>

<nav>和<ul>的CSS有點技巧，我設(shè)置了一個固定值height（等于計算出的鏈接高度），和設(shè)置<nav>上的overflow-y，以“裁剪”其中的鏈接。

在<ul>的樣式中，有一個很大的padding-bottom值，它將任何可見的滾動條推到看不見的地方。

nav {
  position: relative;
  z-index: 2;
  height: 2.5rem;
  overflow-y: hidden;
  scroll-behavior: smooth;
}

ul {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1.5rem;
  padding-left: 0;
  margin-block: 0;
  overflow-x: auto;
  list-style: none;
  text-align: center;
  white-space: nowrap;
}

在 JavaScript 方面，我們開始查詢選擇器，檢查它是否存在于頁面中，并為導(dǎo)航鏈接和活動鏈接設(shè)置一些變量。

let nav = document.querySelectorAll('nav')

if (nav) {
  let navLinks = document.querySelectorAll('nav a')
  let activeLink = document.querySelector('.active')

  //
}

我們的第一行 JS 是立即（在頁面加載時）將活動鏈接滾動到包含元素的視圖中。我設(shè)置了一個應(yīng)該在屏幕外的鏈接作為.active元素，這樣任何人都可以看到頁面加載時發(fā)生的滾動。

let nav = document.querySelectorAll('nav')

if (nav) {
  let navLinks = document.querySelectorAll('nav a')
  let activeLink = document.querySelector('.active')
  activeLink.scrollIntoView({ behavior: "smooth", inline: "center" })

  //
}

behavior告訴瀏覽器如何為滾動設(shè)置動畫，同時inline告訴瀏覽器水平對齊滾動。從這里，我們需要為每個導(dǎo)航鏈接添加一個事件偵聽器以設(shè)置.active類并將單擊的鏈接滾動到視圖中。最后一段代碼可以用一個scrollIntoView函數(shù)來清除該行的重復(fù)數(shù)據(jù)。

let nav = document.querySelectorAll('nav')

if (nav) {
  let navLinks = document.querySelectorAll('nav a')
  let activeLink = document.querySelector('.active')
  activeLink.scrollIntoView({ behavior: "smooth", inline: "center" })

  navLinks.forEach( function(link) {
    link.addEventListener("click", (event) => {
      navLinks.forEach( function(link) {
        link.classList.remove('active')
      })
      link.classList.add('active')
      link.scrollIntoView({ behavior: "smooth", inline: "center" })
    })
  })
}

把它們放在一起，你就有了一個功能性的橫向滾動響應(yīng)式導(dǎo)航。你甚至可能不需要.active切換類，但它在此處完成了演示，因此為了完整起見，我將其包括在內(nèi)。

相關(guān)文章

• 用CSS Grid創(chuàng)建水平(橫向)滾動容器或列表(div、ul等)
• 用純CSS創(chuàng)建水平滾動DIV容器【實例】
• 純CSS實現(xiàn)水平(橫向)滾動列表
• 如何用JavaScript創(chuàng)建水平(橫向)滾動列表

標簽: 水平滾動