Chrome浏览器中网站无法通过方向键滚动的问题求助

Hey there, let’s dig into why your site isn’t scrolling with arrow keys in Chrome—focus issues are a common culprit here, so let’s break down the most likely fixes step by step.

1. Check for Elements Hogging Focus #

First up, let’s confirm if an unexpected element is holding focus and blocking page scrolling:

• Open Chrome DevTools (hit F12 or Ctrl+Shift+I), go to the Elements tab, and look for any element with a :focus outline (this is the browser’s default visual indicator for focused elements).
• Jump to the Console tab and run this quick command to see exactly which element has focus right now:

  document.activeElement
  

  If the result is something odd (like a hidden input, a closed modal’s leftover element, or a custom UI component), that’s probably the problem. Test by blurring it with:

  document.activeElement.blur()
  

  If scrolling starts working after this, you’ll need to fix the component—make sure it releases focus when it’s no longer active (e.g., when a modal is closed).

2. Inspect CSS That Might Block Scrolling #

Sometimes CSS properties can sneakily break keyboard scrolling:

• Check if your <body> or <html> element has overflow: hidden set (this locks scrolling entirely for the page).
• Look for user-select: none applied to top-level elements—while it’s meant to disable text selection, it can cause wonky focus behavior in Chrome.
• Scan for custom classes like scroll-lock that might be overriding default scrolling behavior accidentally.

3. Hunt for JavaScript Blocking Default Behavior #

A common mistake is code that stops the browser’s default scrolling action with event.preventDefault():

• Search your JS files (and any third-party scripts) for keydown event listeners that target arrow keys. For example:

  document.addEventListener('keydown', function(e) {
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      e.preventDefault(); // This kills default scrolling!
    }
  });
  

  If you find code like this, add conditional checks so it only runs when necessary (e.g., when a modal is open) and lets the browser handle scrolling otherwise.

4. Test in Incognito Mode #

Chrome extensions can sometimes interfere with page behavior. Open your site in an incognito window—if scrolling works here, one of your extensions is the culprit. Disable them one by one to find which one’s causing the issue.

5. Check for Stuck Focus Traps #

If your site uses modals or custom interactive components, they might use a focus trap (to keep focus inside the component) but fail to turn it off when the component closes. A stuck focus trap locks focus inside an invisible element, stopping the page from receiving scroll events.

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