JS滚动背景切换效果问题求助：循环/兼容/触摸适配

Hey there! Let's work through each of your issues step by step, plus clear up that Mac wheel behavior question you had.

Issues & Solutions #

1. Add Loop Scrolling (Wrap from Last to First, First to Last)

Your current code stops at the first/last slide. To make it loop, we'll adjust the index logic to wrap around instead of stopping:

• When scrolling down from the last slide, reset index to 1
• When scrolling up from the first slide, set index to maxIndex
  We'll also update the animation logic to handle the wrap properly.

2. Fix Firefox Upward Scrolling

Firefox uses DOMMouseScroll which handles scroll direction differently than mousewheel. Instead of relying on wheelDelta, we'll use deltaY (standardized across browsers) to detect scroll direction:

• deltaY > 0 = scrolling down
• deltaY < 0 = scrolling up

3. Add iPhone Touch Support

We'll add touch event listeners (touchstart, touchmove, touchend) to detect swipe gestures. We'll track the start and end Y positions of the touch to determine if it's an upward or downward swipe, then trigger the same slide change logic as the wheel events.

Mac Wheel Behavior Question

Yes, this is absolutely a Mac-specific behavior! Mac's trackpad (and some mice) use smooth scrolling, which sends multiple rapid scroll events with small delta values instead of a single event per "tick". Your endAnim flag helps, but we added a small guard and event prevention to make it more consistent.

Modified Full Code #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContainer">
  <div class="content content-1 main-content">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum One</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="content content-2">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum Two</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="content content-3">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum Three</h1>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.main-content {
  top: 0 !important;
  z-index: 100 !important;
}

.pageContainer {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background: white;
}

.content {
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  align-items: center;
  text-align: center;
  background-size: cover;
}

.content-1 {
  background-image: url('https://preview.ibb.co/f88WDy/test_image_1.jpg');
}

.content-2 {
  background-image: url('https://preview.ibb.co/fbVNLd/test_image_2.jpg');
}

.content-3 {
  background-image: url('https://preview.ibb.co/i79Gfd/test_image_3.jpg');
}

JavaScript

$(document).ready(function() {
  var index = 1;
  var maxIndex = $('.content').length;
  var endAnim = true;
  var touchStartY = 0;

  // Handle scroll events (wheel + Firefox DOMMouseScroll)
  $('body').on('mousewheel DOMMouseScroll', function(e) {
    e.preventDefault(); // Block default page scroll
    if (!endAnim) return;

    // Consistent scroll direction detection across browsers
    var delta = e.originalEvent.deltaY || -e.originalEvent.detail;
    var isScrollDown = delta > 0;

    handleSlideChange(isScrollDown);
  });

  // Touch event handlers for mobile/iPhone
  $('body').on('touchstart', function(e) {
    touchStartY = e.originalEvent.touches[0].clientY;
  });

  $('body').on('touchend', function(e) {
    if (!endAnim) return;
    var touchEndY = e.originalEvent.changedTouches[0].clientY;
    var swipeDiff = touchEndY - touchStartY;

    // Ignore small accidental swipes with a threshold
    var isScrollDown = swipeDiff < -50;
    var isScrollUp = swipeDiff > 50;

    if (isScrollDown || isScrollUp) {
      handleSlideChange(isScrollDown);
    }
  });

  // Shared logic for slide transitions
  function handleSlideChange(isScrollDown) {
    endAnim = false;
    var prevIndex = index;

    // Update index with loop wrap logic
    if (isScrollDown) {
      index = index === maxIndex ? 1 : index + 1;
    } else {
      index = index === 1 ? maxIndex : index - 1;
    }

    // Animate the slide switch
    $('.content-' + index).addClass('main-content').fadeIn(500);
    $('.content-' + prevIndex).fadeOut(500, function() {
      $(this).removeClass('main-content');
      endAnim = true;
    });
  }
});

Key Improvements #

• Cross-browser consistency: Uses standardized deltaY for scroll direction detection
• Loop functionality: Slides wrap seamlessly between first and last
• Mobile touch support: Handles swipe gestures on iPhone and other touch devices
• Accidental swipe prevention: Ignores small touch movements to avoid unwanted slides
• Default scroll blocking: Stops the page from scrolling normally while using the slide effect

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