5

目標

したがって<div>、クラス「アクティブ」または「非アクティブ」のいずれかを持つすべての s のリストが単一の列レイアウトにあります。アクティブなクラスはアイテムの右側にグラフィックを表示し、非アクティブなクラスは表示しません。上下の矢印キーを押すと、「アクティブな」クラス（およびそれを含むグラフィック）が前または次の項目に移動するように設定しました。アニメーション化されていませんが、上または下のタグでグラフィックが消えたり再表示されたりするのを視覚的に確認できます。

ここで、アイテムの上端が常に同じ場所にあるように、矢印キーを押してページを下にスクロールしたいと思います。要素リストはページ ウィンドウよりも大きいため、ブラウザを自動的にスクロールして、選択した要素<div>が常に画面の中央に表示されるようにする必要があります...

コード

//Paging through items with arrow keys
theWindow.keydown(function (e) {
    var key = e.keyCode,
        oldItem = $('li.active')

    if ((key === 40 && oldItem.next().length) || (key === 38 && oldItem.prev().length)) {
        var theWindowMod = (window.innerHeight / 2) + 43,
            theHTML = $('html'),
            theDetail = $('.detail')

        theHTML.addClass('notransition')

        if (key === 40 && oldItem.next().length) {
            oldItem.removeClass('active').next().addClass('active')
        } else if (key === 38 && oldItem.prev().length) {
            oldItem.removeClass('active').prev().addClass('active')
        }

        var newItem = $('li.active')

        window.scroll(0, newItem.offset().top - theWindowMod)
        e.preventDefault()
        $('.detail-inner.active').fadeOut(0).removeClass('active')
        $('section.active, .tab.active').removeClass('active')
        newItem.find('.tab').add(theDetail).addClass('active')
        theDetail.find('.detail-' + newItem.attr('class').split(' ')[0]).addClass('active').fadeIn(0)

        setTimeout(function () {
            theHTML.removeClass('notransition')
        }, 1)
    }
});

問題

問題は、すべてのバージョンの Safari で、他のブラウザーではなく、window.scroll メソッドが CSS クラス切り替えのパフォーマンスの点でわずかに遅れていることです。ブラウザが下にスクロールする前に、次の要素の右側にグラフィックが短時間表示されるため、下にスクロールするとページが「グリッチ」しているように見えます。

ライブデモ

ここでライブを見ることができます：

http://hashtag.ly/#minecraft

矢印キーを使用してアイテムのページをめくります。ジャンプに注意してください。これを解決するにはどうすればよいですか？

4

2 に答える 2

1

divの代わりにボタンを使用してみて、特定のアイテムがアクティブ化されたときにsetfocus（）を使用してください。ブラウザは自動的にスクロールして、フォーカスされたボタンを常に表示します。CSSを使用して、ボタンをdivとまったく同じように見せることができます。

于 2012-12-17T03:58:14.807 に答える
1

問題を回避するソリューションが最善の策だと思います。

UX の観点から、サイトを閲覧しているときに、サイトがスクロール位置の制御を奪うのは好きではありません。

また、背の高いブラウザー (私のような) を使用しているユーザーの場合、現在、詳細と選択した投稿の間に多くの白い領域が存在する可能性があります。（スクリーンショットを参照）

詳細は、選択した投稿とはかけ離れています。

選択した投稿の横に詳細が表示され、ユーザーがスクロールできるようにデザインを変更することをお勧めします。詳細の場所を CSS で制御して、選択した投稿の隣に配置すると、他のすべてと同じレンダリング サイクルに配置されます。

選択した投稿に近い詳細は、次のようになります。

選択した投稿に近い詳細。

アップデート：

そういえば、AOL のメール クライアント Alto には、あなたが実装した UX があります。Alto では、キーでブラウズすると左の列が自動的にスクロールします。しかし、実際にはスクロールしているのではなく、コンテナ要素にコンテンツを追加して表示しています (これが何と呼ばれているか忘れました... 仮想化?)。スクロール関連のすべてのビジュアルと動作を自分で管理しているようで、ネイティブ機能を使用していないようです。したがって、それはすべて JS 制御の CSS と DOM 操作であり、実際にはscrollTo()呼び出しはありません。これにより、すべてが同じレンダリング サイクルに入ります。

AOLアルトメール

于 2012-12-17T05:03:04.997 に答える