卡卡網(wǎng)

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

這是最終演示。

demodownload

以下是實(shí)現(xiàn)內(nèi)容。對于 HTML，使用 a <nav>、<ul>和 nav 鏈接。<nav>是滾動(dòng)的，而<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有點(diǎn)技巧，我設(shè)置了一個(gè)固定值height（等于計(jì)算出的鏈接高度），和設(shè)置<nav>上的overflow-y，以“裁剪”其中的鏈接。

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

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)航鏈接和活動(dòng)鏈接設(shè)置一些變量。

let nav = document.querySelectorAll('nav')

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

  //
}

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

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告訴瀏覽器如何為滾動(dòng)設(shè)置動(dòng)畫，同時(shí)inline告訴瀏覽器水平對齊滾動(dòng)。從這里，我們需要為每個(gè)導(dǎo)航鏈接添加一個(gè)事件偵聽器以設(shè)置.active類并將單擊的鏈接滾動(dòng)到視圖中。最后一段代碼可以用一個(gè)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" })
    })
  })
}

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

相關(guān)文章

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

標(biāo)簽: 水平滾動(dòng)