无jQuery实现模态框内指定ID元素的平滑滚动方案咨询

Got it, let's adjust your existing smooth scroll code to work inside your modal container. Here's how to do it step by step:

Key Changes Needed #

Your original code targets document.body as the scroll container, but we need to switch this to your #myModal element (since it has overflow-y: scroll set). We also need to calculate the scroll position relative to the modal, not the entire page.

Updated Code #

First, keep your reusable smooth scroll function (we'll tweak the end condition for better reliability), then add the modal-specific logic:

// Reusable smooth scroll function (tweaked for better end detection)
function scrollTo(element, to, duration) { 
  if (duration <= 0) return; 
  var difference = to - element.scrollTop; 
  var perTick = difference / duration * 10; 
  
  setTimeout(function() { 
    element.scrollTop = element.scrollTop + perTick; 
    // Use a tolerance check instead of strict equality (avoids floating point issues)
    if (Math.abs(element.scrollTop - to) < 1) return; 
    scrollTo(element, to, duration - 10); 
  }, 10); 
}

// Get references to your modal and target element
const modalContainer = document.getElementById('myModal');
const targetElement = document.getElementById('poleTimeDiv');

// Bind the scroll action to your trigger (e.g., a button with ID "scrollToTargetBtn")
document.getElementById('scrollToTargetBtn').addEventListener('click', function() {
  // Calculate the correct scroll position relative to the modal
  const modalRect = modalContainer.getBoundingClientRect();
  const targetRect = targetElement.getBoundingClientRect();
  
  // Compute how far the modal needs to scroll to bring the target into view
  const scrollTargetPosition = targetRect.top - modalRect.top + modalContainer.scrollTop;
  
  // Trigger the smooth scroll with your modal as the container
  scrollTo(modalContainer, scrollTargetPosition, 600);
});

What's Different? #

• Scroll Container: We're now passing modalContainer (your #myModal element) instead of document.body to the scrollTo function, since this is the element with scrollable content.
• Position Calculation: Using getBoundingClientRect() ensures we get the correct position relative to the modal, even if your modal has nested elements or isn't the direct parent of the target. This avoids issues with offsetTop which depends on the element's offsetParent.
• End Condition: The tolerance check (Math.abs(...) < 1) fixes cases where floating-point calculations prevent element.scrollTop from exactly matching to.

Alternative: Native Smooth Scroll #

If you don't need the custom animation logic, you can use the native scrollIntoView method for simpler code:

document.getElementById('scrollToTargetBtn').addEventListener('click', function() {
  targetElement.scrollIntoView({
    behavior: 'smooth', // Enables smooth scrolling
    block: 'start',     // Aligns the top of the target with the top of the modal
    inline: 'nearest'
  });
});

This method automatically uses the closest scrollable container (your modal) and works in all modern browsers.

内容的提问来源于stack exchange，提问作者Seamus.Reeve