C# - Nagyméretű HTML objektumok megjelenítése scrollozva, IFRAME használata nélkül

forráskód letöltése
Ha egy web oldalon belül szeretnénk megjeleníteni például egy táblázatot mely nagyon hosszú, viszont a megjelenítésre szánt terület ehhez képest kisebb, akkor egyetlen megoldás, hogy ezt a táblázatot egy scrollozható területen jelenítjük meg.
Mellékelt példa megnyitása előtt szükséges egy Scroll nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
Ilyen problémák áthidalására találták ki a <IFRAME> HTML objektumot, mely úgy működik, hogy egy web lapon belül meghatározhatunk egy területet, amelyre egy másik web lap tartalma tölthető. Ez a terület fix magasságú és szélességű lehet, és ha a betöltött tartalom ennél nagyobb, akkor automatikusan scrollozható lesz. Ennek a megoldásnak van viszont egy nagy hátránya: egy oldal megjelenítéséhez két kérés indul el a klienstől a szerverünk felé. Ugyanis az első web oldal letöltődése után, mikor az <IFRAME> értelmezésre kerül, akkor egy újabb kérés indul szerverünk felé, mely ennek a tartalmát tölti le. Bármilyen gyors kapcsolattal is rendelkezik kliensünk, biztosak lehetünk benne, hogy két kérés teljesítése időben tovább fog tartani, mint eggyé.
Ezért mostani példánkban egy olyan megoldást keresünk, melyhez nem lesz szükségünk <IFRAME>-re. A megoldást egy stílus fogja szolgáltatni overflow néven. Így például egy táblázat fix területen történő megjelenítése esetén, ha azt scrollozhatóvá szeretnénk tenni, akkor a következő lépéseket végezzük el: először is tegyünk fel egy olyan kontrolt, melynek eredménye egy <DIV> lesz (Panel, Grid Layout Panel, stb.), ehhez rendeljük hozzá az overflow stílust, majd erre a kontrolra helyezzük el a DataGrid-et. Állítsuk be a kívánt szélességet, magasságot mind a két kontrol esetén.
Ha az overflow stílus értékének az auto-t választjuk, akkor a vízszintes és függőleges görgetősáv automatikusan jelenik meg olyan esetekben, mikor a tartalom szélessége vagy magassága meghaladja e kontrolét.
  overflow: auto;
Ha azt szeretnénk elérni, hogy mindig látszódjon mindkét görgetősáv, akkor az overflow értékét válasszuk scroll-ra.
  overflow: scroll;