视频全屏触发scroll事件导致页面刷新的技术求助

Hey there! Let's break down this frustrating issue and get it fixed up.

The root problem here is that when you enter video fullscreen, most browsers adjust the page's viewport or scroll position (often jumping to the top) as part of the fullscreen transition. This triggers your scroll event listener, which then hits your "scroll to top = refresh" logic—resulting in an unwanted refresh while the video is fullscreen.

Here are two targeted solutions to resolve this:

1. Disable Refresh Logic During Fullscreen #

The most straightforward fix is to detect when the page is in fullscreen mode, and skip your top-scroll refresh logic entirely during that time.

Step 1: Track Fullscreen State #

First, add listeners to monitor when the page enters/exits fullscreen (covering all browser prefixes):

let isInFullscreen = false;

// Listen for fullscreen changes (standard + browser prefixes)
const updateFullscreenState = () => {
  isInFullscreen = !!(
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  );
};

document.addEventListener('fullscreenchange', updateFullscreenState);
document.addEventListener('webkitfullscreenchange', updateFullscreenState);
document.addEventListener('mozfullscreenchange', updateFullscreenState);
document.addEventListener('msfullscreenchange', updateFullscreenState);

Step 2: Modify Scroll Listener to Respect Fullscreen #

Update your scroll event handler to check for fullscreen before running the refresh logic:

window.addEventListener('scroll', () => {
  // Skip refresh logic if we're in fullscreen
  if (isInFullscreen) return;

  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  // Only trigger refresh if we're truly at the top (add a small threshold to avoid false positives)
  if (scrollTop <= 10) {
    // Your existing "fetch new posts and refresh page" logic here
    fetchNewPostsAndRefresh();
  }

  // Keep your existing "load older posts on scroll down" logic
  const scrollHeight = document.documentElement.scrollHeight;
  const clientHeight = document.documentElement.clientHeight;
  if (scrollTop + clientHeight >= scrollHeight - 20) {
    loadOlderPosts();
  }
});

2. Add a "User Intent" Check (Optional Extra Protection) #

To avoid any edge cases (like accidental tiny scrolls triggering refresh), you can add a check to ensure the scroll was initiated by the user, not a browser action like fullscreen.

For example, track user-initiated scrolls with a flag:

let isUserScrolling = false;

// Set flag when user starts scrolling
window.addEventListener('mousedown', () => isUserScrolling = true);
window.addEventListener('touchstart', () => isUserScrolling = true);
window.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') isUserScrolling = true;
});

// Reset flag after scroll ends
window.addEventListener('scrollend', () => isUserScrolling = false);

// Update scroll listener
window.addEventListener('scroll', () => {
  if (isInFullscreen) return;

  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  // Only trigger refresh if user intentionally scrolled to top
  if (scrollTop <= 10 && isUserScrolling) {
    fetchNewPostsAndRefresh();
  }

  // ... keep your load older posts logic
});

These changes will prevent the fullscreen video transition from accidentally triggering your page refresh, while keeping all your normal scroll-based functionality intact.

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