4

回避策はありますか? 組み込みのブラウザ機能を使用するのではなく、独自のカスタム スクロールバー スクリプトを実行しています。私はいくつかの理由から画像要素に SVG を使用することを好みますが、かなり大きな落とし穴の 1 つは、svg をタッチまたはマウスホイールするとイベントがブロックされ、ページのスクロールが停止することです。これは、SVG がドキュメントの幅全体を占める可能性があるモバイル ブラウザーではさらに顕著です。この場合、SVG 要素に到達するとすぐに、ユーザーはそれを超えてスクロールできなくなります。

IE ではテストしていませんが、Chrome では SVG の上でタッチ コマンドが機能せず、Firefox ではマウスホイール イベントが問題になります。私はそれがIEの両方であると思います。

まともな解決策は、何らかの形で SVG 要素にイベントを追加し、イベントをキャッチしてスクロール イベントに渡すことです。私は方法を見つけることができないようです。さらに良い解決策は、何らかの方法でドキュメントを SVG の上に配置して、SVG がスクロールをまったく妨げないようにすることです。繰り返しますが、方法が見つからないようです。

SVG 要素に object タグを埋め込んでいますが、これはさまざまな理由で重要です。object タグが実際に原因であると想定しています。

4

1 に答える 1

8

Duopixel のコメントによる。追加:

object {
    pointer-events: none;
}

css を使用すると、Firefox と Chrome の両方で問題が解決します。まだ IE でテストする必要がありますが、今のところ、これが最善かつ最も簡単な解決策のようです。

ポインター イベント属性を説明する優れた記事は、http://davidwalsh.name/pointer-eventsにあります。

上記の問題が IE の問題である場合は、ポインタの位置をキャプチャして適切な要素に渡す必要がある JavaScript ソリューションを使用できます。jQuery を使用しているが、非常に簡単にバニラ JavaScript に変換できる作業バージョンは、http: //jsbin.com/uhuto/1/editにあります。

于 2013-05-14T02:45:24.170 に答える