使用jQuery实现带垂直滚动条的水平导航及页面横向滚动需求问询

Let's break this down into two key parts: refining your rotated div scroll behavior, and implementing the jQuery-powered navigation that syncs with it.

1. Core CSS Setup for Rotated Scroll Container #

First, let's make sure your parent container and the #lay div are properly styled to translate vertical scroll into horizontal movement. You already have the 7000px width and -90deg rotation, but we need to adjust the parent and fix positioning quirks to avoid layout offsets:

/* Parent container - this will display the vertical scrollbar */
.scroll-container {
  width: 100vw; /* Match your desired viewport width */
  height: 100vh; /* Fixed height to trigger vertical scroll */
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* Your existing #lay div, with adjusted transform origin and positioning */
#lay {
  width: 7000px;
  height: 100vh; /* Match parent height to align rotation correctly */
  transform: rotate(-90deg) translateY(-100vh);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}

The translateY(-100vh) fixes the off-screen shift caused by the rotation, ensuring your content starts in the visible viewport.

2. jQuery Navigation Implementation #

Now let's add the navigation that ties into the vertical scroll. We'll create clickable nav items that scroll to corresponding sections in #lay, and highlight the active nav item as the user scrolls.

HTML for Navigation & Content #

<nav class="horizontal-nav">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <!-- Add more sections as needed -->
  </ul>
</nav>

<div class="scroll-container">
  <div id="lay">
    <div id="section1" class="scroll-section">Content for Section 1</div>
    <div id="section2" class="scroll-section">Content for Section 2</div>
    <div id="section3" class="scroll-section">Content for Section 3</div>
    <!-- Add your remaining content sections here -->
  </div>
</div>

jQuery Code #

$(document).ready(function() {
  const $scrollContainer = $('.scroll-container');
  const $lay = $('#lay');
  const $navItems = $('.horizontal-nav a');
  const sectionOffsets = [];

  // Pre-calculate each section's horizontal offset (converted to vertical scroll distance)
  $('.scroll-section').each(function() {
    // Since #lay is rotated, horizontal offset = vertical scroll needed to reach the section
    const offset = $(this).offset().left;
    sectionOffsets.push(offset);
  });

  // Nav item click handler: smooth scroll to corresponding section
  $navItems.on('click', function(e) {
    e.preventDefault();
    const targetId = $(this).attr('href');
    const targetOffset = $(targetId).offset().left;
    
    // Animate vertical scroll to match the section's horizontal position
    $scrollContainer.animate({
      scrollTop: targetOffset
    }, 500); // Adjust scroll speed (ms) as needed
  });

  // Scroll handler: highlight active nav item based on current scroll position
  $scrollContainer.on('scroll', function() {
    const currentScroll = $(this).scrollTop();
    
    // Find which section is currently in view
    sectionOffsets.forEach((offset, index) => {
      const nextOffset = sectionOffsets[index + 1] || $lay.width();
      if (currentScroll >= offset && currentScroll < nextOffset) {
        $navItems.removeClass('active');
        $navItems.eq(index).addClass('active');
      }
    });
  });
});

Additional CSS for Navigation Styling #

.horizontal-nav {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
}

.horizontal-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.horizontal-nav li {
  margin-bottom: 10px;
}

.horizontal-nav a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.horizontal-nav a.active {
  background-color: #007bff;
  color: white;
}

.scroll-section {
  width: 100vw; /* Each section takes full viewport width */
  height: 100vh;
  float: left;
  /* Add your custom section styling here */
}

Key Notes #

• The rotation and translation trick works because rotating the div 90 degrees swaps the scroll axis: vertical scroll on the parent container translates to horizontal movement on the rotated content.
• We convert each section's horizontal offset to a vertical scroll value since that's what the parent container uses for scrolling.
• The smooth scroll animation and active nav highlighting make the experience feel polished and intuitive for users.

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