求问：Div滚动入视图顶置隐藏前区块的效果名称（CSS/jQuery实现）

Hey there! That effect you're describing is commonly called Fullpage Scrolling (or sometimes One Page Scrolling) — it’s a super popular choice for landing pages, portfolios, and sites that want to present content in distinct, immersive full-viewport chunks. As you noted, when you scroll (or trigger navigation), each section slides into view and takes up the entire screen, pushing the previous section out of sight—blending slideshow-like presentation with the intuitive feel of scrolling a webpage.

How to Implement It #

Option 1: Pure CSS (Modern, No JavaScript) #

Using CSS Scroll Snap, you can achieve this effect with minimal code, and it’s supported by all modern browsers:

First, set up your HTML structure:

<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>

Then add the CSS:

/* Ensure the viewport is the base for scrolling */
html, body {
  height: 100%;
  margin: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory; /* Force vertical alignment to sections */
}

/* Style each full-viewport section */
.section {
  height: 100vh; /* Make each section take the full viewport height */
  scroll-snap-align: start; /* Align the top of the section with the viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

/* Optional: Add distinct backgrounds to sections */
.section:nth-child(1) { background-color: #f8f9fa; }
.section:nth-child(2) { background-color: #e9ecef; }
.section:nth-child(3) { background-color: #dee2e6; }

This will automatically snap each section to the viewport as you scroll, creating that clean slide-in/out effect without any JS.

Option 2: jQuery (For More Customization) #

If you want finer control over animations (like custom scroll speed, or triggering events when sections change), jQuery is a great choice. Here’s a basic implementation:

First, include jQuery, then use this code:

<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
  const sections = $('.section');
  let currentSection = 0;
  let isAnimating = false;
  const sectionHeight = $(window).height();

  // Set each section to full viewport height
  sections.height(sectionHeight);

  // Listen for mouse wheel scroll
  $(window).on('wheel', function(e) {
    if (isAnimating) return; // Prevent overlapping animations
    isAnimating = true;

    // Determine scroll direction
    if (e.originalEvent.deltaY > 0 && currentSection < sections.length - 1) {
      currentSection++;
    } else if (e.originalEvent.deltaY < 0 && currentSection > 0) {
      currentSection--;
    }

    // Animate scroll to the target section
    $('html, body').animate({
      scrollTop: currentSection * sectionHeight
    }, 800, function() {
      isAnimating = false; // Re-enable scrolling after animation ends
    });
  });
});
</script>

With this, you can adjust the animation duration (the 800 value is milliseconds), add navigation buttons, or even trigger CSS transitions when sections come into view.

For more advanced features (like keyboard support, parallax elements, or responsive adjustments), there are dedicated libraries built for this exact effect, but the above examples cover the core functionality you’re looking for.

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