web-dev-qa-db-ja.com

スクロールなしのjQueryフォーカス

HTML要素（例： "a"）にフォーカスし、現在のスクロール設定を変更しない方法を教えてください。

例のために。私が使用する場合：

$('#link').focus();

このリンクは画面に表示されません（例：表示領域の下）、ブラウザは要素を表示するために下にスクロールします。スクロールバーを動かさずにフォーカスを設定するにはどうすればよいですか？スクロールバーを元の場所に留めておく必要があります。

私はこれを試しましたが、画面のちらつきが発生します。これはハックであり、エレガントなソリューションではありません。

var st=$(document).scrollTop();
$('#link').focus();
$(document).scrollTop(st);

誰か助けてもらえますか？

jqueryfocusscrollbarscroll
32
buzoganylaszlo

これを試して：

$.fn.focusWithoutScrolling = function(){
  var x = window.scrollX, y = window.scrollY;
  this.focus();
  window.scrollTo(x, y);
  return this; //chainability

};

その後

$('#link').focusWithoutScrolling();

編集：

これはIE10では機能しないことが報告されています。考えられる解決策は、次のものを使用することです。

var x = $(document).scrollLeft(), y = $(document).scrollTop();

しかし、私はそれをテストしていません。

43
Felipe Martim

これがあなたにとってとても難しい理由は、あなたがそれをすることになっていないからです。ブラウザは、ユーザーがこのようなことを行うWebサイトを回避できるように設計されています。フォーカスがあるリンクは、キーボードのReturnキーまたはスペースを押すことによってアクティブになり、ユーザーが認識していないリンクをたどることをめったにないためです。

それに反対するのではなく、ブラウザで作業してみてください。そうすれば、通常、ユーザーはより幸せになります。

3
Martin Jespersen

Focusメソッドで_{preventScroll: true}_オプションを使用します。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

JQueryを使用している場合は$('#el')[0].focus({preventScroll: true})を試すか、コレクション内のそれぞれに対して繰り返します

3
Dan Eastwell

$('#link').css('position', 'fixed').focus().css('position', 'static')はFirefoxで動作します。

（編集：このハックは使用しないでください）

2
jd.

私は同じ問題を抱えていますが、言い換えると、要素がビューポートに表示されたらフォーカスを当てることがよりエレガントな解決策になると思います。

これが私がコピー/貼り付けしたものです（このスレッドからADBへの称賛 要素がビューポートに表示されているかどうかをjqueryでチェック ）

$.fn.inView = function(){
    if(!this.length) return false;
    var rect = this.get(0).getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);

};



window.$(window).on('scroll',function(){ 

    if( $('#elementcontainingfocus').inView() ) {
       $(function() {
                $("#elementcontainingfocus input").focus();
                    $("input[type=text]:focus").css({  
                    "box-shadow": "0 0 5px rgba(81, 203, 238, 1)",
                    "border": "1px solid rgba(81, 203, 238, 1)"
                    });
                });
    }

});
1
Dave Powell

このjQueryソリューションを試してください：

$('#link').select();
0
Ripper

これは私のために働いた

var focusWithoutScrolling = function(element) {
    var fixed = { "position": "fixed" };
    var posStatic = { "position": "static" };
    $(":root").css(fixed);
    $("body").css(fixed);
    $("html").css(fixed);
    $(element).focus();
    $(":root").css(posStatic);
    $("body").css(posStatic);
    $("html").css(posStatic);
}
0
Martin