Chrome与Opera浏览器滚动Bug求助：是否与Ajax相关？

Hey there, let's dig into this frustrating scrolling bug you're hitting in Chrome 65.0.3325.181 and Opera 52.0.2871.37. I’ve dealt with similar quirks in older Chromium-based browsers before, so here are the most probable causes and actionable fixes to try:

1. Container Height Miscalculation (Most Common) #

Older Chromium builds (which both these browser versions use) often mess up scrollable height calculations when dealing with dynamic content, absolute-positioned elements, or overflow: auto/scroll containers. The scrollbar shows up like normal, but the browser incorrectly thinks there’s no content beyond those 9 items.

Fixes:

• Force a repaint/reflow of your scroll container once all 50 items finish loading. Add this quick JS snippet after your content renders:

  const scrollContainer = document.querySelector('.your-scroll-container-selector');
  if (scrollContainer) {
    // Trick to trigger browser reflow
    scrollContainer.style.display = 'none';
    void scrollContainer.offsetHeight; // Reading height forces recalculation
    scrollContainer.style.display = '';
  }
  

• Double-check your container’s CSS: Ensure you haven’t set a hardcoded max-height or height that only fits 9 items. Also, avoid using transform on the container or its parent—older Chromium had weird bugs where transforms broke height calculations.

2. Async Content Loading Timing Issue #

If your 50 items load via an async request, the browser might calculate the scroll height before all content is fully rendered. When you open the URL in a new tab, caching or slightly different loading order lets the content render completely, which is why it works there.

Fixes:

• Move your scroll height logic to run after all content finishes rendering—stick it at the end of your async request’s then callback, or use a MutationObserver to watch for new items being added to the container and recalculate height when changes happen.
• Skip unreliable setTimeout delays; use DOM events or observer APIs for consistent results.

3. Chromium Scroll Anchoring Bug #

Chrome 65-era builds had a known bug with scroll anchoring: when dynamic content is inserted, the browser’s scroll position calculation can glitch out, locking the scroll range prematurely. Since Opera 52 uses the same Chromium branch, it inherits this bug.

Fixes:

• Disable scroll anchoring temporarily by adding this meta tag to your page’s <head>:

  <meta name="scrollanchoring" content="off">
  

• Or disable it via CSS:

  html {
    overflow-anchor: none;
  }
  

4. Extension Interference #

Old browser extensions (like ad blockers or page optimizers) sometimes mess with DOM structure or CSS in unexpected ways, breaking scroll calculations. When you open the URL in a new tab, the extension might load later or not activate at all, so the bug disappears.

Fixes:

• Test the page in incognito/private mode—if scrolling works here, an extension is the problem. Disable extensions one by one to find the culprit.
• Add your internal page to the extension’s exception list to prevent it from modifying the page.

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