0

これは説明するのが難しい問題です...<div>ページの高さが固定されており、内部に多数のコンテンツ アイテムがあります。各アイテムは正方形<div>で、左にフロートしているため、左から右、上から下の領域を埋めます。項目が多すぎてビューに収まらない場合は、コンテンツ領域がスクロールします ( overflow-y: auto)。

ASCII アートを許してください:

---------------------
| [ 1 ] [ 2 ] [ 3 ] |
| [ 4 ] [ 5 ] [ 6 ] |
| [ 7 ] [ 8 ] [ 9 ] |
---------------------

問題は、一番下の行が切り取られない限り、内部のアイテムが領域に完全に収まらないことです。だから私がやりたいことは、ユーザーがコンテンツ領域の下部から切り取られたアイテムにカーソルを合わせたときに、ビューを自動的に下にスクロールすることです。

特定のアイテムがクリップされているかどうかを判断する方法がわかりません。

これは完全に奇抜ですか？または、これを行うための論理的な方法はありますか?

4

2 に答える 2

0

これは非常に基本的な例です。

http://jsfiddle.net/8Kb7N/

基本的に、各正方形の div には、固有の名前を持つ関連付けられたアンカーが含まれます。

window.location をそのアンカーの名前に設定する各項目のホバー イベントを設定します。これにより、エリア内を移動できるようになります。

于 2012-08-17T22:14:36.267 に答える
0

@Geuis の方法を最初に試した後、間違った問題を解決していることに気付きました。項目の最後の行が、クリップされる行と必ずしも同じではないためです。

たとえば、3x4 グリッドに 12 個のアイテムがあるとします。1 行に 3 個のアイテム、合計 4 行です。次に、コンテナーの高さが、最初の 2 行と 3 行目の上半分を表示するのに十分だとします。最後の行は 4 行目ですが、一番上までスクロールしたと仮定すると、クリッピングされている行は 3 行目です。または、コンテナーの一番下までスクロールするとどうなりますか? これで、2 番目の行が切り取られ、下ではなく上から外れます。

そのため、行を見るのではなく、ホバーされている特定のアイテムを見て、その単一のアイテムが完全に表示されているかどうかを判断する必要があることに気付きました。そうであれば、何もしません。そうでない場合は、アイテムのどちらの端がクリップされているかに応じて上下にスクロールします。

これが私が思いついたものです。ホバー時:

var containerHeight = $container.height(),
    itemHeight = $(this).height(),
    itemOffset = Math.floor($(this).position().top),
    itemVisible = containerHeight - itemOffset,
    itemClip = itemHeight - itemVisible;

if (itemClip > 0){
    $container.scrollTo('+=' + itemClip, 600);
} else if (itemOffset < 0){
    $container.scrollTo('-=' + Math.abs(itemOffset), 600);
}

($containerはスクリプトの別の場所で を含むものとして定義されていますdiv)

1行ずつ：

  1. すべてのアイテムを保持するコンテナーの高さを取得します
  2. ホバリングされているアイテムの高さを取得する
  3. コンテナーの上部からホバーされたアイテムの上部までの距離を取得します
  4. コンテナーの高さ (1 行目) から距離 (3 行目) を引きます。
  5. 4 行目との差を、ホバリングされているアイテムの高さ (2 行目) から差し引きます。

これで、次の 2 つのことがわかります。

  • 行 3 の結果が負の場合、項目はコンテナーの上部を越えてその数のピクセル分クリップされています。
  • 行 5 の結果が正の場合、項目はコンテナーの下部を超えてその数のピクセル分クリップされています。

これを知っていれば、コンテナを正しい方向に正しい距離だけスクロールして、アイテム全体を表示できます。

実際のスクロール自体には、現在のスクロール位置からピクセル数を上下にスクロールするためにjQuery ScrollToプラグインが必要です(コンテナーの上部からではありません。これは、jQuery の組み込み関数が行うことです)。x.scrollTop()

(ScrollTo は値として負の数を取らないため、上にスクロールするには、itemOffset- したがっての絶対値を取得する必要がありますMath.abs(itemOffset))。

于 2012-08-21T14:14:26.547 に答える