为什么移动 Safari 会在滚动期间触发：活动状态？答案

【问题标题】：Why Does Mobile Safari Trigger :active State during scroll?为什么移动 Safari 会在滚动期间触发：活动状态？
【发布时间】：2011-05-31 17:34:22
【问题描述】：

目前正在 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;}

【问题讨论】：

您的手指是否在上述内容上滚动？
如果您要实现的目的是仅在点击元素时应用颜色，而不是在滚动操作期间，那么您可以使用 -webkit-tap-highlight-color 而不是 :active ，但这带有非标准属性的明显警告。

标签： css mobile-safari pseudo-element

【解决方案1】：

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

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:red; }。

【讨论】：

【解决方案2】：

您应该使用 ontouchstart/ontouchend 来添加/删除带有 Javascript 的类。然后使用该类而不是 :active。

【讨论】：

ontouchstart 是在触摸时立即激活，还是有延迟？
没有延迟。有关更多背景信息，请参阅code.google.com/mobile/articles/fast_buttons.html
如果您确实需要解决方法，这可能会起作用。然而，这并不是一个干净的解决方案，必须在所有浏览器中使用额外的 javascript 来修复移动 Safari 中的错误。问题仍未得到解答：为什么移动 Safari 会在滚动期间触发 :active？
使用 ontouchstart 添加类与使用 :active 的结果相同 - 即在滚动动作期间触摸元素时应用样式。