3

フォームに任意の入力タイプの多くのフィールドを含めることができるフォーム システムに取り組んでいます。つまり、テキスト入力/エリア、ラジオ、チェックボックス、選択、および複数選択があります。

私の問題は、マウスが複数選択に入った場合にフォームをスクロールすると（単一選択でもこれが行われると想定しています）、選択がマウスイベントを制御するため、スクロールが停止することです。不快なスクロールへのアクセスを取り戻すには、マウスを入力の外に移動する必要があります。

オプションをスクロールするためにフォーカスがあれば、スクロールを入力に再バインドしても問題はありませんが、自動的に想定したくありません。

4

1 に答える 1

0

この問題を解決した方法は次のとおりです。スクロールイベントを監視する関数をターゲットに付けました。ターゲットは、スクロールするとマスクが表示されるクイック マスク要素を取得し、イベント バブルがターゲットをスクロールするのを防ぎます。

外側の要素がスクロールされているため、ターゲット要素はスクロール イベントを長時間保持しません。たとえば 500ms のタイムアウトをアタッチすると、ターゲットをスクロールしたいことをターゲットに知らせることができます。

function scrollUninterruptable(elem) {
var scrollTimer = null,
scrollMask = $('<div>', { 'style': 'position: absolute; right: 0; left: 0; top: 0; bottom: 0;', 'class': 'scrollMask' }).hide();
elem = $(elem);
elem.append(scrollMask);
elem.parent().off('scroll.uninterruptably').on('scroll.uninterruptably', function() {
    elem.css('position', 'relative');
    scrollMask.show();
    if (scrollTimer) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        elem.css('position', '');
        scrollMask.hide();
    }, 500);
});
}

繰り返しますが、これはスクロール イベントが 500 ミリ秒のタイムアウトをアタッチするのを監視し、マスクを非表示にして、スクロール イベントがターゲットで発火できるようにします。

于 2013-08-28T22:04:00.180 に答える