So fixieren Sie die vier Seiten der Tabelle zum Scrollen nach oben, unten, links und rechts

Frage:

Als ich kürzlich an Projektstatistiken arbeitete, stieß ich auf eine spezielle Anforderung: Beim Scrollen nach oben und unten in der Tabelle mussten Kopf und Ende der Tabelle fixiert sein, beim Scrollen nach links und rechts hingegen die erste und letzte Spalte der Tabelle.

Es wird vielleicht klarer, wenn wir zuerst das Effektdiagramm zeigen:

Beim Scrollen nach links und rechts sind die beiden Spalten fixiert und der mittlere Teil von Kopf und Ende scrollt mit.

Beim Hoch- und Runterscrollen bleiben Kopf und Ende fixiert, der Mittelteil der ersten und letzten Spalte scrollt mit.

Ideen:

Nach längerem Überlegen bin ich zu dem Schluss gekommen, dass es grundsätzlich schwer zu realisieren ist, wenn man nur eine Tabelle verwendet und es beim Hoch- und Runterscrollen zu Widersprüchen kommt. Schließlich habe ich meine Meinung geändert und verwendet, um diesen Effekt zu erzielen, ein Div-Layout und ein tabellenähnliches Design.

lösen:

1. Gesamtlayout: Es ist in drei Teile unterteilt: oben, Mitte und unten, nämlich Kopfzeile, Hauptteil und Fußzeile. Der Körper ist hoch. Implementieren Sie das Scrollen nach oben und unten. Ist das nicht einfach? Haha.

2. Kopfzeilenlayout: unterteilt in Container links rechts, links 10 % Breite links schwebend, Container 80 % Breite links schwebend, rechts 10 % Breite links schwebend. Fügen Sie einen Spaltencontainer (relative Positionierung) mit der tatsächlichen Breite der Daten innerhalb des Containers hinzu.

3. Textkörper, Fußzeile und Kopfzeile.

4. Steuerkern: Generieren Sie ein Div mit der gleichen Breite wie der Container (80 %) und platzieren Sie darin ein Div mit der gleichen Breite wie die tatsächlichen Daten des Spaltencontainers (z. B. id=Scroll). Um linke und rechte Bildlaufleisten zu simulieren.

Das heißt, die simulierte Bildlaufleiste steuert das Scrollen des Spaltencontainers in der Kopf- und Fußzeile. Dadurch werden die beiden Spalten beim Scrollen nach links und rechts fixiert und die Container der ersten und letzten Zeile scrollen ebenfalls.

Abschluss:

Da der Codestil zu lang ist, um ihn zu veröffentlichen, werde ich hier nur über die Ideen sprechen und es ausprobieren.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Original-URL: http://www.cnblogs.com/checccy/p/5601145.html