Javascript Fokussierung eines großen div mit festen Header

Ich benutze eine kleine Bibliothek namens "$.scrollTo", um eine Rolle zu einem div-Element in meinem HTML zu animieren. oben auf meiner Seite habe ich eine feste Navigationsleiste. am ende der animation möchte ich das div fokussiert haben (für barrierefreiheit). Wenn mein div zu groß ist, wird am Ende der Animation die Tatsache, dass es fokussiert wird, einfach ein wenig vom Bildschirm entfernt.Javascript Fokussierung eines großen div mit festen Header

Dies passiert nicht mit kleinen divs.

hier ist mein Code (check jsfiddle unten):

$('#buttonid').on("click", function() { 

//fixed nav bar height (to compensate when scrolling) 
var fixed_navbar_height = $("#navbar-id").height(); 

//the element to scroll to 
var $go_to_selector = $("#topic2"); 

$.scrollTo($go_to_selector, { 
    duration: 1000, 
    offset: -fixed_navbar_height, 
    onAfter: function() { 
    //if you comment out this .focus it works as intended. 
    $go_to_selector.focus(); 
    } 
}); 
});

hier ist ein JSFIDDLE Beispiel: https://jsfiddle.net/dy35obpq/3/

offensichtlich die onAfter vermasselt es, aber ich würde sowohl die Animation mag und den Fokus . Irgendwelche Ideen, wie Sie einen Fokus auf ein großes div-Element implementieren können, ohne dass die Bildlaufleiste geändert werden muss? Vorschläge sind mehr als willkommen.

Quelle

2016-09-26 ponyboil

Wenn Sie sagen, es sendet es "vom Bildschirm", was meinst du? – phreakv6

der Fokus, legt das div an der Spitze meines Bildschirms - nur unter der festen Kopfzeile, die es ignoriert. check the JSFIDDLE, und kommentiere die Zeile des Fokus, um zu sehen, wie es funktionieren sollte – ponyboil

In der JSFiddle scrollt nichts überhaupt für mich ... – Danmoreng

Versuchen Sie es.

onAfter: function() { 
    $go_to_selector.focus(); 
    $(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height); 
    }

Ich habe diese Zeile einfach in Ihrem OnAfter Callback hinzugefügt. $(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);

und es scheint das Problem behoben zu haben, während der Fokus immer noch erhalten bleibt. Vielleicht möchten Sie CSS verwenden, um die blaue Fokusmarkierung zu deaktivieren.

Quelle

2016-09-26 15:43:54 phreakv6

das scheint tatsächlich das Problem zu lösen. Danke. – ponyboil

Javascript Fokussierung eines großen div mit festen Header

Antwort

Verwandte Themen