Vízszintes görgetés tiszta css
Jó lenne, ha meg tudnánk ezt csinálni:
Sajnos, ez nem fog megtörténni. Ez még nem tervezi CSS.
Ez elég rossz, mert a cég, ahol dolgozom, akkor nagyon hasznos lenne. Mi sokat előadások és bemutató - ez inkább egy vízszintes darab. Jellemzően, az arány oldalán a dia 4: 3 vagy 16: 9. Emiatt van egy állandó probléma vízszintes és függőleges csúszda, webes technológiák. Úgy értem magam a „mi”. De az, amit szeretek, így nehéz.
Egy másik használata
HTML5 és CSS3 gyakorlatban nulla az eredmény!
Mindannyian tudjuk, hogy JS Sok módja van a vízszintes görgetést. Néhány példa a CSS-trükkök. Arra gondoltam, hogy lehetséges-e, hogy végre ez a gondolat tiszta CSS. A megoldás nagyon egyszerű volt:
létrehozása tartály elemek;
kapcsolja a tartály 90 fokkal óramutató járásával ellentétes irányba, hogy alsó korlát beigazolódott;
kapcsolja elemeket a tartály belsejében vissza a helyére.
1. lépés) hozzon létre egy tartályt
Hozzon létre egy div blokk sok gyerek.
Ebben a példában, a tartály görgethető 300px szélessége, akkor 8 elemeket 100h100px. A méretei önkényes, akkor kérheti bármilyen.
Magassága válik széles és fordítva. Az alábbiakban a „szélesség” a tartály lesz 300px:
És a gyermek elemek:
2. lépés) csuklósan kapcsolódik a edény
Most arra van szükség, hogy kapcsolja be a tartályt -90 fok segítségével CSS tulajdonságok átalakítani. Kaptunk egy vízszintes scroller.
Csak van egy kis probléma: a gyermek elemek fordult együtt a tartályba.
3. lépés) visszaad egy gyermek vissza a helyére
Szóval hogyan lehet visszatérni az elemeket a helyükre? Kapcsold vissza a segítségével CSS tulajdonságok átalakítani.
4. lépés) rögzített pozicionálás
Úgy néz ki, minden jó, de van egy pár probléma.
HTML5 és CSS3 gyakorlatban nulla az eredmény!
Mi lett a tartály, és a horgony kérték jobb felső sarokban ez a balra tolt a tartály szélessége. Ha úgy találja, hogy nehéz elképzelni, hogy egy ujját a jobb felső sarokban az oldal, és kapcsolja be. Hozam: meg kell forgatni vissza a tulajdonságok használatával lefordítani.
Ez már jobb. De az első elem még mindig nem tekintik ugyanaz a probléma merül fel a gyermek elemek. Ez lehet helyesbíteni az első gyermek elem a felső margó szélességét értékét vagy átalakítja az összes elemet a tartály. A legegyszerűbb módja, amit találtam, hogy adjunk padding a felső tartály szélességével egyenlő gyermekelemek, ezáltal teremtve meg a pufferzóna az elemeket.
Tovább demo négyszögletes gyermek elemek:
kompatibilitás
Megnéztem a kompatibilitás elérhető eszközök rám.
Mivel formázó scrollbars eddig csak akkor működik, Webkit / Blink böngészők Firefox és az IE ábra egy hagyományos szürke görgetősáv. Ezt lehet korrigálni a JS és elrejti őket, de ez a téma egy másik leckét.
Görgetés a kerék egér működik az asztali. De a laptop véleményét ebben a kérdésben. A készülékek egy kis screenshotok és érintse padas demo úgy viselkedik, mintha a div nem forog.
A mobil eszközök
Én kellemesen csalódtam, amikor megtudtam, hogy az Android megérti, hogy a tartály volt kapcsolva, és lehetővé teszi, hogy lépjünk csúsztató balra és jobbra.
Az iOS, éppen ellenkezőleg, a dolgok nem olyan sima. A böngésző úgy viselkedik, mintha a tartály nem forog egyáltalán. Ezért meg kell görgetni, hogy használja a ellop felfelé és lefelé, ami elég furcsa. Overflow: hidden nem oldja meg a problémát.
következtetés
Annak ellenére, hogy jobb, ha nem használja ezt a módszert is eredményes. Azt tesztelték, hogy az egyes készülékek, de nem minden, és nem olyan alaposan.
A legnagyobb probléma - touch beviteli ahol balra és jobbra csinálni ellop felfelé és lefelé. Ennek megoldás lehetne regisztrálni egy üzenetet az oldalon egy magyarázat, de akkor meg kell hivatkozhat arra a tényre, hogy a felhasználók olvasni. És még akkor is lenne ellentétes a józan ész. Egy másik módja, hogy megoldja -, hogy elfog a szenzoros bemenet segítségével JS eszközökön, de akkor jobb, hogy írjon minden JS és teljesen elhagyni a CSS hack.
Felülvizsgálat: Team webformyself.
HTML5 és CSS3 gyakorlatban nulla az eredmény!
A legtöbb IT hírek és webfejlesztés A csatorna-távirat
