Question

目前在iOS上测试移动网站（很快就会转到其他设备，因此不确定这是否属于其他操作系统/浏览器）。

移动版Safari如何在滚动期间触发链接的活动状态？

我的测试页面由无序列表构成，每个列表项中都有一个链接标记，扩展到100％宽度。问题是在正常滚动期间，触发：活动状态，显示用于在以下状态期间显示的背景：仅显示活动状态（我显然忽略了示例中不必要的样式和内容）：

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

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

Answer 2

您可以通过监听 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:red; }。

为什么Mobile Safari触发器：滚动期间的活动状态？

2 个答案: