网站背景图片高度86%-100%时滚动异常问题求助

将一张大型图片放在<figure>标签中作为网站主背景，设置max-width:100%、height:100%后出现滚动异常：

• 滚动页面触碰到图片区域后会停止，需再次触发滚动才能继续，触摸板和键盘上下键操作均有此问题
• 滚动图片区域时垂直滚动条无变化

已尝试的操作：

• 仅当img的CSS高度低于86%时滚动流畅，86%-100%区间问题复现
• 切换使用<img>标签与background-image: url()属性，问题一致
• 压缩图片大小，未解决问题
• 尝试background-size的contain、cover、auto等值，未解决
• 设置background-attachment: scroll，问题仍存在

更新：在图片下方添加大量文本后，即使图片height设为100%，无论用<img>标签还是background-image属性，滚动均恢复正常。

需求：保持图片height为100%，解决滚动异常问题。

相关代码 #

HTML代码 #

<body>
        --Hidden Content--
 
        <!------------------
        ----MAIN CONTENT----
        -------------------->
        <main>
            <section class="upperpart">

                <header class="main_header">
                    <div class="getoff">
                       <h2>get rm10 off</h2>
                        <p>your first order
                            <span>code:shemya</span>
                        </p>
                    </div>

                    <div class="share">
                        <h2>share & earn</h2>
                        <p>up to 15% off</p>
                    </div>
                    <div>
                       
                        <h2>cash on delivery</h2>

                    </div>
                </header>

                <figure class="main_figure">
                    <img src="https://www.lux-review.com/wp-content/uploads/2022/05/Kids-Fashion.jpg" alt=""
                        height="85%">
                    <figcaption></figcaption>

                    <img src="" alt="">

                    <div class="figure_ads">
                        <p>mega year end sale now on</p>
                        <p>up to <span>80%</span>off</p>
                        <button>buy now</button>
                    </div>
                </figure>

            <section class="middelpart">
                 --Hidden Content--
            </section>
            
           <section class="bottompart">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing 
                   elit. Reprehenderit fugit earum accusantium non
                    amet
                    .</p>
            </section>
        </main>
</body>

CSS代码 #

main {
    width: 100vw;
    min-height: 100vh;
    margin-top: 15.2rem;
}

main .upperpart {
    background-color: antiquewhite;
    height: 80rem;
    width: 90vw;
    margin: 0 auto;
    /* visibility: hidden; */
   
}

.upperpart .main_figure {
    width: 90vw;
    /* max-height: 60rem; */
    position: relative;
   
}

.upperpart .main_figure img {
    max-width: 100%;
    height: 100%;
}

main .bottompart p {
    font-size: 2rem;
    margin-top: 5rem;
   
}

根据问题现象和更新信息，滚动异常大概率是因为图片区域高度接近视口高度时，浏览器误判滚动边界，或者元素触发了浏览器的滚动劫持/惯性滚动冲突。以下是针对性的解决方案：

方案1：给图片容器添加最小高度兜底 #

给.main_figure设置一个大于视口高度的min-height，确保页面总高度足够触发正常滚动逻辑，同时保留图片height:100%的设置：

.upperpart .main_figure {
    width: 90vw;
    position: relative;
    min-height: 101vh; /* 略大于视口高度，强制页面产生足够滚动空间 */
}

方案2：禁用图片的拖拽/选择行为 #

浏览器对图片默认有拖拽、选择交互，可能干扰滚动事件，通过CSS禁用这些行为：

.upperpart .main_figure img {
    max-width: 100%;
    height: 100%;
    user-select: none; /* 禁止选择图片 */
    pointer-events: none; /* 让图片不接收鼠标/触摸事件，滚动直接穿透到页面 */
}

注意：如果图片上有交互元素（比如你的.figure_ads按钮），需要给交互元素单独恢复pointer-events: auto：

.upperpart .figure_ads {
    pointer-events: auto;
}

方案3：调整容器高度计算方式 #

把.upperpart的固定height:80rem改成min-height:80rem，同时让.main_figure继承高度的方式更灵活，避免高度计算冲突：

main .upperpart {
    background-color: antiquewhite;
    min-height: 80rem; /* 改用最小高度，允许内容撑开高度 */
    width: 90vw;
    margin: 0 auto;
}

.upperpart .main_figure {
    width: 90vw;
    position: relative;
    height: 100%; /* 继承父容器高度 */
}

方案4：强制页面滚动事件优先级 #

通过JavaScript阻止图片区域的滚动事件冒泡，强制页面滚动：

document.querySelector('.main_figure').addEventListener('wheel', function(e) {
    e.stopPropagation();
    window.scrollBy(0, e.deltaY);
});

这个方案适合前三种CSS方案无效的情况，直接接管滚动逻辑。

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