Vermeiden Sie unerwünschte Scrolling durch Tastaturnavigation in IE ausgelöst?

Ich habe eine HTML-Seite, in der es eine < div> gibt, die Inhalte enthält, die breiter sind als sie selbst; Der Überschuss wird mit dem Stil "Überlauf: versteckt" unsichtbar gemacht.Vermeiden Sie unerwünschte Scrolling durch Tastaturnavigation in IE ausgelöst?

Es kann Links in diesem Inhalt geben. Wenn Sie in IE8 (aber nicht in Firefox 3.6) die Tastatur (d. H. Die Tabulatortaste) verwenden, um den Fokus auf eine am rechten Rand abgeschnittene Verknüpfung zu setzen, scrollt IE das gesamte div weit genug nach links, um die gesamte Verknüpfung sichtbar zu machen. (Das Gleiche passiert mit Links auf der linken Seite, wenn sie den Fokus haben, wenn das Div bereits gescrollt wurde - es scrollt den Inhalt nach rechts, um den gesamten Link sichtbar zu machen.)

Ich kann versuchen, dieses unerwünschte Scrollen zu verbergen Setzen Sie den scrollLeft-Wert auf das div, wenn es nicht mehr reagiert - jQuery macht das einfach. Aber ich würde es vorziehen, wenn möglich, einen Stil oder eine Einstellung zu verwenden, um das Scrollen an erster Stelle zu verhindern. Wie bereits erwähnt, scrollt Firefox einen teilweise ausgeschnittenen Link nicht in die Ansicht, wenn er den Fokus erhält. Idealerweise sollte IE dazu gebracht werden, sich auf die gleiche Weise zu verhalten.

Beispiel HTML unten. Verwenden Sie im IE die Tabulatortaste (oder die Umschalttaste + Tabulatortaste), um den Fokus auf die einzelnen Verknüpfungen der Reihe nach zu setzen, damit der Inhalt der Box sich seitwärts verschiebt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Demo of undesired scrolling</title> 
</head> 
<body> 
    <a href="http://www.w3.org">Before</a> 
    <div style="width: 400px; border: 1px solid gray; overflow: hidden;"> 
     <div> 
      <div style="width: 450px; text-align: center;"> 
       <a href="http://www.w3.org">Somewhere in the middle</a> 
      </div> 
      <div style="width: 450px; text-align: left;"> 
       <a href="http://www.w3.org">Over on the left</a> 
      </div> 
      <div style="width: 450px; text-align: right;"> 
       <a href="http://www.w3.org">Over on the right</a> 
      </div> 
     </div> 
    </div> 
    <a href="http://www.w3.org">After</a> 
</body> 
</html>

Vielen Dank im Voraus für jede Einsicht!

Quelle

2011-01-11 Paul

Dies ist sehr ähnlich zu [eine Frage, die ich gerade gefragt habe] (http://stackoverflow.com/q/13827409/925897). – brentonstrine

Kannst du nicht einfach alles in das enthaltene div?

ich Problem, dass die Art und Weise feste Scrollen ... ersetzen diese:

 <div style="width: 400px; text-align: right;">

für Linie 16 in Ihrem Beispiel.

hilft das?

Quelle

2011-01-13 02:18:50 SamStar

Danke für Ihre Antwort! In der Tat würde Ihr Vorschlag dieses Beispiel beheben, aber dies ist nur ein Beispiel, um das Problem zu veranschaulichen, das ich sehe (und mir selbst zu beweisen, dass es wirklich ein Problem mit dem Browser ist, nicht mit meiner Seite). Die echte Seite hat zwei volle Seiten Inhalt nebeneinander, mit jQuery-Animationen, um einen reibungslosen Übergang von einem zum anderen zu machen, und einige Links, die teilweise am Rand aufgedeckt werden und die bei Hover oder Fokus in die volle Ansicht animieren. Funktioniert gut in Firefox ... aber IE blättert nicht wie oben beschrieben. Gibt es eine Möglichkeit, das zu stoppen? – Paul

Ich habe versucht mit dem, was ich weiß von CSS und konnte nicht ... aber ich bin wahrscheinlich nicht so erfahren wie du bist ... Ich kenne nur HTML und CSS ... also vielleicht kann jemand anderes helfen. Ich wäre interessiert zu sehen, was getan werden könnte. – SamStar

Ich versuchte Floaten vor einer Minute und früher experimentierte ich mit Positionierung, Z-Index und Überarbeitung der Divs ... nichts scheint zu funktionieren ... – SamStar

Ich glaube nicht, dass es keine „natürliche“ Art und Weise das Scrollen zu verhindern, aber Sie haben ein paar Optionen JS haben:

Option # 1

Überprüfen Sie, ob der Link aus dem Blickfeld im onfocus-Event.
Wenn es nicht sichtbar ist, entweder verwischen Sie es einfach oder finden Sie vorzugsweise den nächsten gültigen Link und konzentrieren Sie das. Demo: http://jsfiddle.net/cwolves/eHTVV/2/
Wenn Ihre Links teilweise sichtbar sind, wird dies merkwürdig wirken, da sie nicht auswählbar sind.

Option # 2

die Scroll-Position im onscroll Ereignis des Behälters div zurückgesetzt mit jQuery in allen anderen Situationen als Scrollen.
Sie müssen eine Variable speichern, die die korrekte Bildlaufposition in den jquery Animationsereignisse hat, zB:
```
var correctXOffset = 0; 
myDiv.animate({ left: 500 }, function(){ 
    correctXOffset = this.offsetLeft; 
}); 
```
Demo: http://jsfiddle.net/eHTVV/3/
Alle Links außerhalb der Ansicht noch wählbar , aber Sie werden nicht in der Lage sein, sie zu sehen, aber ich nehme an, dass die anderen Browser wahrscheinlich so handeln.

Option # 3

Entfernen Sie die unsichtbaren Links aus dem Register-Index um, wenn Ihr div Scrollen erfolgt, zB:

myDiv.animate({ left : 500 }, function(){ 
    $('.invisiblePage a').prop('tabIndex', -1); 
    $('.visiblePage a' ).removeProp('tabIndex'); 
});

Wie Option # 1 Links werden nicht auswählbar

Option # 4

"Clip" der Inhalt mit Hilfe von CSS: clip : rect(0px 400px 400px 0px);
Der Behälter muss absolut
etwas kompliziert JS diese Eigenschaft einstellen muss positioniert werden
demo:

Quelle

2011-06-10 03:32:04

Vermeiden Sie unerwünschte Scrolling durch Tastaturnavigation in IE ausgelöst?

Antwort

Verwandte Themen