CSS横向滚动问题求助：卡片滚动异常及页面联动滚动解决

首先，很高兴你已经搞定了初始的滚动失效问题（父元素overflow: hidden导致的）。针对现在出现的滚动卡片容器时背景地图跟着滚动的问题，这在移动端横向滚动场景里挺常见的，主要是浏览器默认的触摸滚动行为会冒泡到页面层面，下面给你两种靠谱的解决方案：

方案一：CSS 触摸行为控制（推荐） #

通过touch-action属性明确告诉浏览器，这个横向滚动容器只允许横向触摸操作，禁止触发纵向的页面滚动。直接修改你的.scrolling-wrapper CSS：

.scrolling-wrapper{
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 20px 0px 0px 20px;
  -webkit-overflow-scrolling: touch;
  /* 添加这行代码 */
  touch-action: pan-x;
}

touch-action: pan-x会限制该元素内的触摸操作仅允许横向平移，这样滚动卡片时就不会带动页面背景一起滚动了，纯CSS解决，简单高效。

方案二：JavaScript 精准阻止事件冒泡（兼容旧场景） #

如果需要兼容一些不支持touch-action的旧浏览器，可以通过监听触摸事件，判断用户操作方向后再阻止不必要的默认行为。在你的Angular组件里添加如下代码：

import { ElementRef, OnInit } from '@angular/core';

export class YourShopComponent implements OnInit {
  constructor(private el: ElementRef) {}

  ngOnInit() {
    const scrollingWrapper = this.el.nativeElement.querySelector('.scrolling-wrapper');
    scrollingWrapper.addEventListener('touchmove', (e: TouchEvent) => {
      // 判断用户是横向滚动还是纵向滚动
      const horizontalDiff = Math.abs(e.touches[0].clientX - e.changedTouches[0].clientX);
      const verticalDiff = Math.abs(e.touches[0].clientY - e.changedTouches[0].clientY);
      const isHorizontalScroll = horizontalDiff > verticalDiff;

      if (isHorizontalScroll) {
        // 只在横向滚动时阻止默认的纵向滚动行为
        e.preventDefault();
      }
    }, { passive: false });
  }
}

这个方法会精准识别用户的滚动意图，只有当用户在横向滚动卡片时才阻止页面的纵向滚动，不会影响页面其他区域的正常滚动操作。

另外，顺便检查下.scrolling-wrapper的父元素有没有设置overflow: auto或overflow: scroll，如果有的话也可能引发滚动冲突，确保父元素的overflow设置不会干扰卡片容器的独立滚动。

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