2009-06-29 13 views
33

Da ich jQuery verwende, würde jede Lösung über das auch funktionieren. Im Idealfall möchte ich jedoch beide wissen.Wie verhindere ich das Scrollen mit den Pfeiltasten, aber NICHT mit der Maus?

Ich habe bereits die Pfeiltasten an eine andere Funktion auf meiner Seite gebunden (mit jQuery), aber sie dazu führen, dass die Seite zusätzlich blättern, verursacht mir Probleme.

Ich könnte dies auf einmal gewusst haben, aber ich erinnere mich nicht mehr daran.

+0

Es ist ein extrem schlechtes UI-Design, das verhindert, dass Tastaturtasten den aktiven Frame scrollen. Ich (und viele andere Leute) stöbere hauptsächlich mit Schlüsseln und es ist sehr frustrierend, hier und da die Maus auf der ungeraden Seite benutzen zu müssen, die die richtige Tastaturnavigation blockiert. Natürlich gibt es wahrscheinlich gute Gründe dafür, aber Sie sollten sicherstellen, dass Ihre eine davon ist. –

+16

Es ist. Meine Webanwendung ist ein Editor; keine formelle Webseite. –

+4

Ich stimme völlig zu, dass es ein schlechtes UI-Design ist, das Standardverhalten des Browsers immer zu verhindern. Aber es ist völlig in Ordnung, es in bestimmten Situationen zu tun, imho. In meinem Fall muss ich verhindern, dass die Seite scrollt, wenn der Benutzer zwischen Alternativen in einer Liste wechselt. Wenn der Fokus außerhalb der Liste liegt, wird die Seite normal durchlaufen. Innerhalb der Liste wird die Seite nicht scrollen, es sei denn, sie wird benötigt, um das ausgewählte Element anzuzeigen. –

Antwort

75

Das Hinzufügen eines Tastenhandlers auf Dokumentebene macht den Trick!

var ar=new Array(33,34,35,36,37,38,39,40); 

$(document).keydown(function(e) { 
    var key = e.which; 
     //console.log(key); 
     //if(key==35 || key == 36 || key == 37 || key == 39) 
     if($.inArray(key,ar) > -1) { 
      e.preventDefault(); 
      return false; 
     } 
     return true; 
}); 
+0

Oh ordentlich. Lemmy, geben Sie eine Chance ... –

+7

Es behandelt PgUp (33), PgDn (34), Ende (35), Home (36), Links (37), Up (38), Right (39), Down (40) – TheVillageIdiot

+0

Yay! Danke vielmals. –

1

Wenn Sie ein Dokument Ebene keypress Handler hinzufügen wird es normal, blättern Sie auf der Seite jederzeit verhindern, nicht nur, wenn Ihr Element den Fokus hat, könnte dies eine unerwünschte Wirkung.

2

Unter bestimmten Umständen, z. Wenn du kein Element hast, auf das du dich konzentrierst, nur ein Bereich, auf den du klicken musst, hast du vielleicht nicht so viel Kontrolle über den Handler und das Event auf globaler Ebene kann bestenfalls etwas flockig sein (wie ich herausgefunden habe) auf die harte Tour).

Die einfachste Lösung in diesen Fällen besteht darin, auf den Klick sogar der Steuerschaltfläche zu binden und auf ein leeres Eingabeelement zu fokussieren, das Sie -9000px auf der linken Seite positionieren.

Sie können das Ereignis dann zuverlässig über Keydown blockieren und müssen sich auch keine Gedanken über das Blockieren des Standardverhaltens oder anderer globaler Listener machen, da das Standardverhalten des Eingabeelements den Cursor nur nach links und rechts bewegt.

Verwandte Themen