jQuery导航轮播问题求助：导航与子导航功能异常排查

Hey Maria, let's fix those carousel navigation issues step by step! I've looked over your implementation and spotted the key problems—let's break them down and get your navs working exactly as you want.

1. Fix Arrow Targeting (Arrows Only Work for the First Nav) #

The main issue here is that you're using unique IDs (like #carousel__prev) for elements that repeat across two navs. IDs can only be used once per page, so your script was only attaching functionality to the first matching element. We need to make this logic modular so each nav controls its own arrows.

Quick Fixes: #

• Swap IDs for classes: Update your HTML to use reusable classes instead of duplicate IDs. For example:
  • Change #carousel__prev to .carousel__prev
  • Change #carousel__next to .carousel__next
  • Wrap each nav in a container class like .carousel-nav to group related elements
• Rewrite the script to target each nav instance: Loop through every .carousel-nav container and bind arrow actions to its specific scrollable content.

Here's the updated script:

// Loop through each carousel navigation container
document.querySelectorAll('.carousel-nav').forEach(navContainer => {
  // Get elements specific to this nav
  const prevBtn = navContainer.querySelector('.carousel__prev');
  const nextBtn = navContainer.querySelector('.carousel__next');
  const scrollableList = navContainer.querySelector('.nav__list');

  // Check if content overflows on load/resize
  const checkOverflow = () => {
    const hasOverflow = scrollableList.scrollWidth > scrollableList.clientWidth;
    nextBtn.style.display = hasOverflow ? 'block' : 'none';
    prevBtn.style.display = 'none'; // Hide prev by default
  };

  // Scroll left when prev is clicked
  prevBtn.addEventListener('click', () => {
    scrollableList.scrollBy({ left: -300, behavior: 'smooth' });
  });

  // Scroll right when next is clicked
  nextBtn.addEventListener('click', () => {
    scrollableList.scrollBy({ left: 300, behavior: 'smooth' });
  });

  // Update arrow visibility as user scrolls
  scrollableList.addEventListener('scroll', () => {
    const isAtStart = scrollableList.scrollLeft === 0;
    // Check if we're near the end (add small buffer for rounding errors)
    const isAtEnd = scrollableList.scrollLeft >= scrollableList.scrollWidth - scrollableList.clientWidth - 10;

    prevBtn.style.display = isAtStart ? 'none' : 'block';
    nextBtn.style.display = isAtEnd ? 'none' : 'block';
  });

  // Initialize overflow check and update on window resize
  checkOverflow();
  window.addEventListener('resize', checkOverflow);
});

And the adjusted HTML structure for both navs:

<!-- First Navigation -->
<div class="carousel-nav">
  <button class="carousel__prev">Prev</button>
  <div class="nav__list">
    <!-- Your first set of nav items -->
  </div>
  <button class="carousel__next">Next</button>
</div>

<!-- Second Navigation -->
<div class="carousel-nav">
  <button class="carousel__prev">Prev</button>
  <div class="nav__list">
    <!-- Your second set of nav items -->
  </div>
  <button class="carousel__next">Next</button>
</div>

2. Handle "Scroll to End" Behavior #

From your partial description, I assume you want to hide the "Next" arrow once the user scrolls to the end of the nav content. The script above already handles this:

• It checks if the scroll position is near the total scrollable width (minus the container's visible width)
• If true, it hides the Next button; if not, it keeps it visible

3. Bonus: Polish CSS for Better UX #

Add a few styles to prevent content from being hidden under arrows and improve the overall look:

.carousel-nav {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel__prev, .carousel__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  padding: 0.5rem 1rem;
  border: none;
  background: #fff;
  cursor: pointer;
}

.carousel__prev {
  left: 0;
}

.carousel__next {
  right: 0;
}

.nav__list {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0 2.5rem; /* Add padding to avoid content under arrows */
}

Now each nav will work independently, arrows will show/hide correctly based on scroll position, and your overflow logic will behave as expected.

内容的提问来源于stack exchange，提问作者Maria