0

これが私の現在の状況です：

いくつかのスクロール可能な div を含む Web ページがあります。これらの各 div には、多数のオブジェクトが含まれています。YUI を使用して、各オブジェクトで実行できるアクションのポップアップ メニューを表示しています。各オブジェクトには、動的に構築および表示される独自のメニューが関連付けられています。ポップアップ メニューは大きくなる可能性があり、スクロール可能な div の境界に重なる可能性があります。

フォーカスの問題 (メニューにアクセスできる必要があります) から、スクロール可能な div の端にあるアクションの上にマウスを置くと、div が自動的にスクロールし、コンテンツは移動しますが、メニューは静止したままになります。これが発生したときにメニューを動的に移動しようとすることは、ユーザー エクスペリエンスが低下すると思われるため、私がやりたいことではありません。

したがって、このフォーカスされたメニューが div をスクロールしないようにする必要があります。最良のユーザー インターフェイスを提供するための私の考えは、メニューが開いているときにこれらの内部 div がスクロールしないようにすることです。これにより、メニューが最適な位置に配置され、どのアイテムが操作されているかをユーザーに示すことができます。ユーザーがボックスをスクロールしたい場合は、クリックしてメニューを閉じてから、通常どおりスクロールできます。

これどうやってするの？主要なブラウザーで動作するソリューションが必要です。

私が最初に考えたのは、その特定の要素のonscrollイベントをリッスンすることでした。残念ながら、そこからスクロールが起こらないようにする簡単な方法はないようです。1 つには、実際のスクロールが発生した後に、私の Javascript イベント コードが実行されているように見えます。

次に、オブジェクトがスクロールした後にコードが実行されるため、obj.scrollTopとobj.scrollLeftをリセットするだけでよいと考えました。案の定、これは機能しているように見えますが、遅いブラウザーでは、ユーザーが div 内のコンテンツを「飛び回る」ように見えるのではないかと心配しています。また、要素のスクロール量がイベント オブジェクトの一部であると、非常に便利です。どこかに引っかかってませんか？この要素の scrollTop 変数と scrollLeft 変数を保存し、スクロールが一時的に無効になっている間にそれらを使用する代わりの方法を探しています。

この問題全体を解決する最善の方法は何ですか?

4

5 に答える 5

3

簡単な答えは、これはできないということです。クロスブラウザソリューションが必要な場合は、2倍になりません。

何かをスクロールできるという明確なアフォーダンスをユーザーに提供し、それを否定することは、単なるUIデザインの質の悪さです。

編集後、実際にはユーザーがスクロールできないようにしようとしているのではないことがわかりました。

しかし、主な答えは真実のままです。完全に表示されておらず、スクロールが発生する長方形（おそらくアンカー？）にフォーカスが移動しているように聞こえます。この長方形に焦点を合わせなければならない理由はありますか？アクセシビリティについては？

于 2009-03-20T18:35:13.963 に答える
3

禁止しようとしている機能の表示に関して、Anthonyに同意します。スクロールを無効にする場合は、ページのその部分を視覚的に無効にするか削除する必要があります。

そのために、問題のスクロール可能なdivの上に半透明のdivを配置できます。これにより、マウスイベントがキャプチャされ、スクロール可能なdivが現在非アクティブであることが視覚的に示されます。クロスブラウザを互換性のあるものにするのは難しく、完璧ではありませんが、このようなクライアント側のトリックはほとんどありません。

于 2009-03-20T18:39:15.670 に答える
0

オーバーフローがなかった場合：スクロールし、代わりにオーバーフロー：非表示にして、ユーザーが必要なときにスクロールできるスクロールアップ/ダウンボタンを提供した場合はどうなりますか？もちろん、これらのボタンは簡単に無効にできます。

于 2009-03-20T18:36:17.097 に答える
0

探している答えではないかもしれませんが、ページが（サーバーから）ロードされている間にdivの表示値を「none」に設定してから、ページのロードにイベントを接続する場合（ ajax.netまたはjavascriptを介してonloadイベントにアタッチします）。これにより、divの表示が「block」に設定されます。これにより、低速のブラウザーでdivの「ジャンプ」が認識されなくなります（「loading」を配置することもできます） div内の画像は、目に見えないだけでなく、何かをしていることをユーザーに示します）

申し訳ありませんが、これ以上複雑で流暢なソリューションを提供できませんでした。

于 2009-03-20T18:36:23.850 に答える
0

この問題を回避する方法を見つけました。スクロール可能なdivからmenu要素を削除し、それをdocument.bodyに直接追加することにより、ブラウザーはすべてdivをスクロールして、フォーカスされた要素を表示しようとしなくなります（要素はすでに完全に表示されています）。

あなたの時間とあなたの答えをありがとう！

于 2009-03-20T20:49:46.963 に答える