仅WooCommerce页面出现双垂直滚动条问题求助

Hey there, let's tackle that double vertical scrollbar issue on your WooCommerce pages. Since you've already checked your theme's CSS without luck, the culprit is likely hiding in a less obvious spot—here's how to track it down and fix it:

Step 1: Identify the Problem Element with Browser DevTools #

First, open up your browser's Developer Tools (F12 or right-click > Inspect) on a problematic WooCommerce page. Then:

• Use the element picker tool (the arrow icon in the top-left of DevTools) to hover over the page until you spot which container is adding the extra scrollbar.
• Look in the Styles tab for any overflow-y property set to scroll or auto on elements like body, html, .site-wrapper, or a WooCommerce-specific container (like .woocommerce-page).
• Jot down the exact selector of that element—this will be key for your targeted fix.

Step 2: Check Non-Theme CSS Sources #

Since your theme's CSS didn't turn up the issue, dig into these common hidden sources:

• WooCore Default Styles: Sometimes core WooCommerce styles can clash with themes. Use DevTools to see if the overflow-y rule is coming from woocommerce.css.
• Plugins: Page builders, custom CSS plugins, or even WooCommerce add-ons might inject conflicting styles. Try disabling plugins one by one temporarily to see if the scrollbar disappears.
• Customizer Extra CSS: Check your theme's Customizer > Additional CSS for any accidental overflow-y rules targeting WooCommerce pages.
• Child Theme: If you're using a child theme, double-check its style.css file for overlooked conflicting styles.

Step 3: Apply a Targeted Fix #

Once you've found the problematic element, add custom CSS that only affects WooCommerce pages (so you don't break other parts of your site). For example:

If the issue is with the body element:

/* Remove extra scrollbar from WooCommerce pages */
body.woocommerce,
body.woocommerce-page {
    overflow-y: visible !important;
}

If it's a specific container like .site-content:

body.woocommerce .site-content {
    overflow-y: visible !important;
}

Add this CSS to your theme's Customizer > Additional CSS, or your child theme's style.css file—this ensures your changes won't get overwritten during theme updates.

Bonus Troubleshooting Tip #

Double-check if any element has height: 100vh combined with overflow-y: scroll—this is a frequent cause of double scrollbars, especially if the element is nested inside the body which already has a scrollbar.

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