8

現在iOSでモバイルサイトをテストしています（まもなく他のデバイスにアクセスするため、これが他のOS /ブラウザに関係するかどうかは不明です）。

モバイルサファリがスクロール中にリンクのアクティブ状態をトリガーするのはなぜですか？

私のテストページは、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

Javascriptでクラスを追加/削除するには、ontouchstart/ontouchendを使用する必要があります。次に、：activeの代わりにそのクラスを使用します。

于 2011-01-17T12:53:25.077 に答える