为什么 Mobile Safari 在滚动过程中会触发 :active 状态？

发布于 2024-10-09 15:25:48 字数 448 浏览 6 评论 0原文

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

原文

Currently testing mobile site on iOS (will get to other devices soon, so unsure if this pertains to other OS's/Browser).

How come mobile safari triggers the active state of a link during scroll?

My test page is constructed of an unordered list with a link tag inside each list item that expands to 100% width. The issue is that during a normal scroll, the :active state is triggered, revealing the background that is intended for showing during :active state only (I'm obviously omitting unnecessary styles and content from the example):

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我不是你的备胎 2024-10-16 15:25:48

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

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

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

您可以根据 isTouchMove 变量的值添加一个类，例如 'not-scrolling'，并在 :active 选择器之外使用它，例如 <代码>:active.not-scrolling { 背景:红色; }。

You can tell if a click turns into a drag gesture or not by listening to touchstart and touchmove events and then evaluate if the touch turns into a scroll or not e.g. if you were coding in angular

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

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

you can add a class, e.g. 'not-scrolling', based on the value of isTouchMove variable and use that in addition to your :active selector, like :active.not-scrolling { background:red; }.

回复收藏 0 原文