css - 为什么Mobile Safari会触发:active State during scroll?

Question

目前正在 iOS 上测试移动网站(很快就会到达其他设备，因此不确定这是否适用于其他操作系统/浏览器)。

移动 safari 如何在滚动期间触发链接的事件状态？

我的测试页面由一个无序列表构成，每个列表项内都有一个链接标记，可扩展到 100% 宽度。问题在于，在正常滚动期间，触发了 :active 状态，显示了旨在仅在 :active 状态期间显示的背景(我显然从示例中省略了不必要的样式和内容):

html:
<ul id="foo"><li><a href="#">Content</a></li></ul>

css:
#foo a {background:white; width:100%; height:100px;}
#foo a:active {background:red;}

Answer 1

您可以通过监听 touchstart 和 touchmove 事件来判断点击是否变成拖动手势，然后评估触摸是否变成滚动，例如如果你用 Angular 编码

let isTouchMove = false;
@HostListener('window:touchmove', ['$event'])
onTouchMove(event) {
  isTouchMove = true;
}

@HostListener('window:touchstart', ['$event'])
onTouchStart(event) {
  isTouchMove = false;
}

您可以添加一个类，例如'not-scrolling'，基于 isTouchMove 变量的值，并在您的 :active 选择器之外使用它，例如 :active.not-scrolling { background :红色的; 。