自动滚动DIV优化：添加无操作延迟定时器及触摸友好改造

Alright, let's fix up your auto-scrolling div to meet both requirements: only starting the scroll after the user is inactive, and making it work smoothly on touch devices. Here's the revised code with clear explanations:

Updated Code #

JavaScript #

// Global variables
let isPaused = false;
let direction = 1;
const element = $('#box');
let autoScrollInterval;
let inactivityTimer;
const INACTIVITY_DELAY = 3000; // 3 seconds of inactivity before auto-scroll starts
const SCROLL_SPEED = 10; // Scroll interval in milliseconds

// Core auto-scroll logic
const autoScroll = () => {
  if (!isPaused) {
    const pos = element.scrollLeft();
    const offset = 1 * direction;
    element.scrollLeft(pos + offset);

    // Reverse direction when hitting edges
    if ((element[0].scrollWidth - element.scrollLeft() === element.outerWidth()) || (element.scrollLeft() <= 0)) {
      direction *= -1;
    }
  }
};

// Start auto-scroll after inactivity
const startAutoScroll = () => {
  // Clear existing interval if any to avoid duplicates
  if (autoScrollInterval) clearInterval(autoScrollInterval);
  autoScrollInterval = setInterval(autoScroll, SCROLL_SPEED);
};

// Stop auto-scroll and reset inactivity timer on user interaction
const resetAutoScroll = () => {
  isPaused = true;
  // Clear existing timer and interval
  if (inactivityTimer) clearTimeout(inactivityTimer);
  if (autoScrollInterval) clearInterval(autoScrollInterval);
  // Restart timer for inactivity
  inactivityTimer = setTimeout(() => {
    isPaused = false;
    startAutoScroll();
  }, INACTIVITY_DELAY);
};

// Initialize: start auto-scroll after initial delay
resetAutoScroll();

// Listen for user interactions to pause/reset
element.on('touchstart mousemove scroll', () => {
  resetAutoScroll();
});

// Resume scroll when user stops interacting
element.on('touchend mouseleave', () => {
  isPaused = false;
});

CSS #

.boxes {
  width:75px; 
  height:75px; 
  display:inline-block; 
  border:1px solid #ccc; 
  text-align:center; 
  padding-top:50px;
}

#box {
  overflow-x: scroll; /* Fixed overflow direction for horizontal scroll */
  width:100%; 
  white-space:nowrap;
  -webkit-overflow-scrolling: touch; /* Enables smooth native scrolling on iOS */
}

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="timeline container">
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
  <!-- Repeat boxes as needed -->
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
</div>

Key Changes Explained #

1. Inactivity Delay for Auto-Scroll

   • Replaced the continuous setInterval with a two-part system:
     • A setTimeout (inactivityTimer) that waits 3 seconds of user inactivity before starting the scroll
     • Any user interaction (touch, mouse movement, manual scroll) clears this timer and pauses the scroll immediately
     • After the user stops interacting, the timer restarts, and auto-scroll resumes if no new actions occur
   • This ensures the scroll only runs when the user isn't actively engaging with the element

2. Touch Device Compatibility

   • Replaced the hover event with touch-friendly alternatives:
     • touchstart: Triggers when the user touches the element (pauses scroll, like mouseenter)
     • touchend: Triggers when the user stops touching (resumes scroll, like mouseleave)
   • Added a scroll event listener: If the user manually scrolls, we pause auto-scroll and reset the inactivity timer
   • Added -webkit-overflow-scrolling: touch to CSS for smooth, native-style scrolling on iOS devices
   • Included mousemove for desktop users, so moving the mouse over the element also pauses the scroll

3. Cleaner Code Structure

   • Encapsulated scroll logic into a reusable autoScroll function
   • Separated start/reset logic into dedicated functions for better readability and maintainability

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