www.Batan.io网站滚动失效问题技术咨询

Hey Thomas, sorry to hear you're stuck with this frustrating scroll issue—let's break down what's likely going on and how to fix it.

Likely Root Cause #

Looking at your code snippet, the biggest culprit is this global mousewheel event binding on the <body> element:

$(function () { 
  $('body').bind('mousewheel', function (event) { 
    event.preventDefault(); 
    var scrollTop = this.scrollTop; 
    this.scrollTop = (scrollTop + ((event.deltaY ...
  });
});

When you call event.preventDefault() in this handler, you're explicitly blocking the browser's native scroll behavior for the entire body. Here's why this leads to your specific problem:

• First load works: The event binding runs on DOM ready, but maybe the initial page state (like limited overflow content, or a delay in other scripts) means the handler doesn't interfere right away.
• Subsequent scroll fails: Once the handler is fully active, any mousewheel input on the body gets intercepted, killing native scroll. The sidebar works because it's almost certainly a separate scroll container (with overflow: auto or scroll) that isn't affected by the body's event block.

Your CSS position changes didn't fix it because the problem isn't layout-related—it's a JavaScript event blocking issue.

Fixes to Try #

1. Remove global scroll blocking (recommended)
   If you don't need custom scroll behavior for the entire body, delete this event binding entirely. If you do need custom scroll for a specific section, target that element instead of <body>:

// Example: Target a specific scrollable container instead of body
$('#custom-scroll-container').bind('mousewheel', function(event) {
  // Only prevent default if you need custom logic for this container
  if (/* your condition for custom scroll */) {
    event.preventDefault();
    // ... rest of your custom scroll logic
  }
});

2. Prevent duplicate event bindings
   If you need to keep the body-level handler, make sure it only binds once to avoid conflicting instances. Replace bind() with on() and add an off() call first:

$(function () {
  // Unbind existing handlers first to avoid duplicates
  $('body').off('mousewheel').on('mousewheel', function(event) {
    // Add logic to only prevent default when necessary, not always
    if (/* your valid use case for custom scroll */) {
      event.preventDefault();
      var scrollTop = this.scrollTop;
      this.scrollTop = (scrollTop + ((event.deltaY ...
    }
  });
});

3. Debug with browser dev tools

• Open Chrome DevTools > Elements > Event Listeners tab, filter for mousewheel on the <body> element to check for duplicate bindings.
• Add console.log('Mousewheel event triggered') inside the handler to see when it's firing, and verify if event.preventDefault() is being called when it shouldn't be.

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