浏览器窗口调整大小时window height功能失效问题求助

Got it, let's tackle this problem! The root issue here is that your current code only runs the scrollbar detection logic once when the page initially loads. When the user resizes their browser window, that check never re-runs—so the link doesn't update to match the new window size. Here's a straightforward, performant solution:

Step 1: Extract the Detection Logic into a Reusable Function #

First, wrap your existing scrollbar check and link toggle logic into a standalone function. This way we can call it whenever we need to update the link's visibility.

function toggleScrollToBottomLink() {
  // Get the target link element
  const scrollToBottomLink = document.getElementById('scroll-to-bottom');
  // Check if page content height exceeds viewport height (scrollbar exists)
  const hasScrollbar = document.documentElement.scrollHeight > window.innerHeight;

  // Toggle link visibility based on scrollbar presence
  scrollToBottomLink.style.display = hasScrollbar ? 'block' : 'none';
}

Step 2: Run the Function on Initial Load #

Keep your initial page-load behavior by calling the function when the DOM is fully ready:

// Trigger on page load (DOM fully rendered)
document.addEventListener('DOMContentLoaded', toggleScrollToBottomLink);

Step 3: Add Window Resize Listener (With Debouncing) #

To handle window resizes, we'll add an event listener to the window.resize event. But since resize events fire very frequently as the user drags the window edge, we'll add a debounce to limit how often our function runs—this prevents unnecessary performance hits.

// Debounce function to throttle function execution
function debounce(func, delay = 100) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Attach debounced resize listener
window.addEventListener('resize', debounce(toggleScrollToBottomLink));

Full Working Example #

Here's the complete code put together, including basic HTML/CSS for context:

<!-- HTML -->
<a href="#page-bottom" id="scroll-to-bottom" style="display:none;">scroll to bottom</a>
<!-- Add enough content to trigger scrollbar, e.g.: -->
<div style="height: 150vh; padding: 20px;">
  Page content here...
  <div id="page-bottom"></div>
</div>

/* CSS (optional, for fixed positioning) */
#scroll-to-bottom {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 8px 12px;
  background: #2d3748;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

// JavaScript
function toggleScrollToBottomLink() {
  const scrollToBottomLink = document.getElementById('scroll-to-bottom');
  const hasScrollbar = document.documentElement.scrollHeight > window.innerHeight;
  
  scrollToBottomLink.style.display = hasScrollbar ? 'block' : 'none';
}

function debounce(func, delay = 100) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', toggleScrollToBottomLink);
// Listen for window resizes with debouncing
window.addEventListener('resize', debounce(toggleScrollToBottomLink));

Key Notes #

• Debouncing: The debounce function ensures our detection logic only runs 100ms after the user stops resizing the window—this keeps the experience smooth without wasting resources.
• Reusable Logic: By encapsulating the check in a function, we avoid code duplication and make future tweaks (like adjusting the scrollbar condition) much easier.
• Scrollbar Check: document.documentElement.scrollHeight gives the full height of your page content, while window.innerHeight is the visible viewport height—comparing these tells us if a scrollbar is necessary.

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