8

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

2 回答 2

0

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; }.

于 2021-08-07T02:14:06.700 回答
-1

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

于 2011-01-17T12:53:25.077 回答