解决HTML/CSS水平滚动元素与悬停覆盖效果兼容问题

我正在开发一个网页，需要实现两个核心特性：

• 水平滚动：元素包含多个舞蹈卡片，鼠标靠近左右边缘时自动滚动；
• 悬停效果：鼠标悬停卡片时，卡片放大并覆盖其他元素，不改变布局间距。

当前使用的HTML结构如下：

<div class="horizontal-scroll-videos">
    {% for dance in dances %}
        <a href="/sample/{{ dance.id }}" class="dance-card">
            <div class="dance-card-image-description">
                <img src="{{ dance.image_url }}" class="dance-card-image" alt="{{ dance.name }}">
                <video class="dance-card-video" dance-video-path="{{ dance.video }}" muted></video>
                <p class="dance-card-description body-text">{{ dance.description }}</p>
            </div>
            <div class="dance-card-body">
                <h5 class="dance-card-title">{{ dance.name }}</h5>
                <div class="dance-card-tags">
                    <span class="badge bg-primary">{{ dance.difficulty }}</span>
                    <span class="badge bg-secondary">{{ dance.genre }}</span> 
                    {% if dance.has_instructions %}
                    <span class="badge bg-warning">Tutorial</span> 
                    {% endif %}
                </div>
            </div>
        </a>
    {% endfor %}
</div>

两个功能单独实现都正常，但无法同时生效，核心矛盾在.horizontal-scroll-videos的overflow-x设置：

• 设置overflow-x: auto时，滚动功能正常，但悬停放大的卡片会被容器截断，无法覆盖其他元素；
• 设置overflow-x: visible时，悬停放大效果正常，但水平滚动功能直接失效。

尝试动态切换overflow-x会丢失滚动位置，切回visible时滚动位置会重置。以下是已实现的悬停和滚动效果代码：

function addHoverEffectDanceCards(){
    const danceCards = document.querySelectorAll(".dance-card");
    danceCards.forEach(danceCard => {
        const video = danceCard.querySelector(".dance-card-video");
        const image = danceCard.querySelector(".dance-card-image");

        const children = danceCard.children;
        const childrenArray = Array.from(children);

        childrenArray.forEach(child => {
            child.addEventListener("mouseover", function() {
                const container = danceCard.closest(".horizontal-scroll-videos");
                const containerRect = container.getBoundingClientRect();
                const danceCardRect = danceCard.getBoundingClientRect();
                if (danceCardRect.left >= containerRect.left && 
                    danceCardRect.right <= containerRect.right) {
                    childrenArray.forEach(child => {
                        classes = child.classList;
                        classes.add("hover");

                        if (classes.contains("dance-card-image-description")) {
                            const imgDesChildren = child.children;
                            const imgDesChildrenArray = Array.from(imgDesChildren);

                            imgDesChildrenArray.forEach(imgDesChild => {
                                imgDesChild.classList.add("hover");
                            });
                        };
                    });

                    danceCard.classList.add("hover");

                    if (!video.src) {
                        fetch('/generate_video_url', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({video_path: video.getAttribute('dance-video-path')})
                        })
                        .then(response => response.json())
                        .then(data => {
                            video.src = data.video_url;
                        })
                        .catch(error => console.error('Error fetching video presigned URL:', error));
                    } 
                    
                    video.currentTime = 0;
                    video.play();
                    video.style.display = "block";
                    image.style.display = "none";
                }
            });

            child.addEventListener("mouseout", function() {
                childrenArray.forEach(child => {
                    classes = child.classList;
                    classes.remove("hover");

                    if (classes.contains("dance-card-image-description")) {
                        const imgDesChildren = child.children;
                        const imgDesChildrenArray = Array.from(imgDesChildren);
        
                        imgDesChildrenArray.forEach(imgDesChild => {
                            imgDesChild.classList.remove("hover");
                        });
                    };
                });

                danceCard.classList.remove("hover");

                video.pause();
                video.style.display = "none";
                image.style.display = "block";
            });
        });
    });
}

const horizontalScrollContainers = document.querySelectorAll(".horizontal-scroll-videos");

horizontalScrollContainers.forEach(container => {
    let scrollInterval;

    container.addEventListener('mouseover', (e) => {
        const screenWidth = window.innerWidth;
        const scrollThreshold = 200;
        const checkLeftScroll = (e) => {
            const mouseX = e.clientX;
            return mouseX > screenWidth - scrollThreshold;
        };
        const checkRightScroll = (e) => {
            const mouseX = e.clientX;
            return mouseX < scrollThreshold;
        }
        if (checkLeftScroll(e)) {
            scrollInterval = setInterval(() => {container.scrollLeft += 180;}, 30);
        } else if (checkRightScroll(e)) {
            scrollInterval = setInterval(() => {container.scrollLeft -= 180;}, 30);
        }
    });

    container.addEventListener('mouseout', () => {
        clearInterval(scrollInterval);
        scrollInterval = null;
    });
});

作为前端新手，求解决这个兼容问题的建议。

核心思路是拆分容器层级，把滚动和悬停放大的容器分开，避免overflow-x的冲突：

1. 修改HTML结构，增加外层容器 #

把原有的.horizontal-scroll-videos作为滚动容器，外面套一个新的容器负责承载悬停放大的卡片（设置overflow: visible），同时保持滚动容器的overflow-x: auto：

<!-- 新增外层容器，负责显示悬停放大的卡片 -->
<div class="scroll-container-wrapper">
    <div class="horizontal-scroll-videos">
        {% for dance in dances %}
            <a href="/sample/{{ dance.id }}" class="dance-card">
                <!-- 原有卡片内容不变 -->
                <div class="dance-card-image-description">
                    <img src="{{ dance.image_url }}" class="dance-card-image" alt="{{ dance.name }}">
                    <video class="dance-card-video" dance-video-path="{{ dance.video }}" muted></video>
                    <p class="dance-card-description body-text">{{ dance.description }}</p>
                </div>
                <div class="dance-card-body">
                    <h5 class="dance-card-title">{{ dance.name }}</h5>
                    <div class="dance-card-tags">
                        <span class="badge bg-primary">{{ dance.difficulty }}</span>
                        <span class="badge bg-secondary">{{ dance.genre }}</span> 
                        {% if dance.has_instructions %}
                        <span class="badge bg-warning">Tutorial</span> 
                        {% endif %}
                    </div>
                </div>
            </a>
        {% endfor %}
    </div>
</div>

2. 调整CSS样式 #

• 外层容器scroll-container-wrapper：设置overflow: visible，宽度和原滚动容器一致，作为卡片悬停放大的显示载体；
• 滚动容器horizontal-scroll-videos：保持overflow-x: auto，同时设置position: relative，卡片设置position: relative，悬停时通过z-index让放大的卡片显示在最上层；
• 悬停放大的.dance-card.hover：用transform: scale(1.1)实现放大，同时设置z-index: 10确保覆盖其他卡片，transform-origin可以控制放大的原点（比如中心center center）。

示例CSS：

.scroll-container-wrapper {
    width: 100%;
    overflow: visible;
    /* 可选：添加和原容器一致的内边距 */
    padding: 1rem 0;
}

.horizontal-scroll-videos {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    position: relative;
    /* 隐藏滚动条（可选） */
    scrollbar-width: none;
}

.horizontal-scroll-videos::-webkit-scrollbar {
    display: none;
}

.dance-card {
    display: inline-block;
    width: 280px;
    margin-right: 1rem;
    position: relative;
    transition: transform 0.3s ease;
    white-space: normal;
}

.dance-card.hover {
    transform: scale(1.1);
    z-index: 10;
    /* 防止放大后超出视口，可根据需要调整 */
    margin: 0 0.5rem;
}

3. 优化JavaScript逻辑 #

• 悬停判断时，把容器改为外层的scroll-container-wrapper，卡片可见性判断基于滚动容器的位置；
• 滚动逻辑不需要修改，依然绑定到.horizontal-scroll-videos容器上。

修改后的悬停事件中的容器获取部分：

// 原代码：const container = danceCard.closest(".horizontal-scroll-videos");
// 修改为：
const scrollContainer = danceCard.closest(".horizontal-scroll-videos");
const containerRect = scrollContainer.getBoundingClientRect();

其他注意事项 #

• 如果卡片放大后出现布局偏移，可调整.dance-card.hover的margin值，保持整体布局间距一致；
• 确保滚动容器的white-space: nowrap，让卡片横向排列；
• 悬停时的视频播放逻辑可以保留，不影响新的容器结构。

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