Saf CSS yatay kaydırma

Yazardan: Konuğumuz Peter Bizmans'ın yazdığı makale. Peter, SCSS'de yazma stillerini çok sevdiği Audience sitesinde bir front-end geliştiricidir. Bugün bize dürüst CSS numarası dediğim şeyi gösterecek. Tüm ağ dikeydir. Siteyi normal bir kitap gibi okuyorsunuz: soldan sağa, yukarıdan aşağı. Ancak bazen dikeylikten uzaklaşmak ve çılgınca bir şey yapmak istersiniz: yatay bir liste yapın. Ya da daha çılgın, yatay bir site!

Böyle yapabilsek güzel olurdu:

/ * sahte kod * / div (kaydırma yönü: yatay;)

/ * sahte kod * / div ( kaydırma yönü: yatay;

Ne yazık ki bu olmayacak. Bu CSS'de bile planlanmamıştır.

Bu çok kötü, çünkü benim için çalıştığım şirkette çok faydalı olacak. Çok fazla sunum yapıyoruz ve bir sunum oldukça yatay bir şey. Genellikle slaytların en boy oranı 4: 3 veya 16: 9'dur. Bu nedenle, yatay kızaklar ve dikey web teknolojileri ile ilgili süregelen bir sorunumuz var. "Biz" derken kendimi kastediyorum. Ama sevdiğim şey zorluk.

Başka bir kullanım durumu

Aklıma özel bir uygulama geldi. Fikir, alıcıların tüm ürünleri tek bir slaytta görüntülemesinin uygun olacağıdır. Doğal olarak, ürün kataloğu tek bir biçime sığmayacaktır. Bu nedenle, kataloğu her biri yatay kaydırmalı üç kategoriye ayırmaya karar verdik. Böylece, her kategoride en popüler üç ürün görünür olurken, daha az önemli olan ürünlere kolayca erişilebilir.

JavaScript olmadan yol

Hepimiz JS'de yatay kaydırma yapmanın birçok yolu olduğunu biliyoruz. CSS Tricks'de bazı örnekler var. Bu fikrin saf CSS'de uygulanıp uygulanamayacağını merak ettim. Çözüm çok basit çıktı:

öğeler içeren bir kap oluşturun;

alt kenar sağda olacak şekilde kabı saat yönünün tersine 90 derece döndürün;

kabın içindeki elemanları yerine döndürün.

Adım 1) kabı oluşturun

Birçok çocukla bir div bloğu oluşturun.

Örneğimizde, kaydırılabilir konteyner 300 piksel genişliğinde olacak ve 8 öğe 100x100 piksel içerecektir. Boyutlar isteğe bağlıdır, istediğinizi ayarlayabilirsiniz.

< div class = "yatay kaydırma sarmalayıcı kareler"> < div > madde 1< / div > < div > madde 2< / div > < div > madde 3< / div > < div > madde 4< / div > < div > madde 5< / div > < div > madde 6< / div > < div > madde 7< / div > < div > madde 8< / div > < / div >

Kabın yüksekliği genişlik olur ve bunun tersi de geçerlidir. Kapsayıcı "genişliğinin" altında 300 piksel olacaktır:

Yatay kaydırma sarmalayıcı (genişlik: 100px; yükseklik: 300px; taşma-y: otomatik; taşma-x: gizli;)

genişlik: 100px; yükseklik: 300px; taşma - y: otomatik; taşma - x: gizli;

Ve çocuklar:

Yatay kaydırma sarmalayıcı\u003e div (genişlik: 100px; yükseklik: 100px;)

Yatay - kaydırma - sarıcı\u003e div ( genişlik: 100px; yükseklik: 100px;

Adım 2) kabı döndürün

Şimdi, dönüştürme CSS özelliğini kullanarak kabı -90 derece döndürmemiz gerekiyor. Yatay kaydırma çubuğumuz var.

Yatay kaydırma sarmalayıcı (... dönüşümü: döndürme (-90deg); kaynağı dönüşümü: sağ üst;)

Yatay - kaydırma - sarmalayıcı ( . . . dönüşümü: döndür (- 90deg);

Sadece küçük bir sorun var: çocuklar kapla birlikte döndüler.

3. Adım) çocukları yerine geri koyun

Öyleyse eşyaları yerine nasıl yerleştirirsiniz? Dönüştürme CSS özelliği ile geri çevirin.

Horizontal-scroll-wrapper\u003e div (... transform: rotate (90deg); transform-orijin: sağ üst;)

Yatay - kaydırma - sarıcı\u003e div ( . . . dönüşümü: döndür (90deg); dönüşümü - başlangıç \u200b\u200bnoktası: sağ üst;

Adım 4) sabit konumlandırma

İyi görünüyor, ancak birkaç sorun var.

Kabı döndürdük ve sağ üst köşeyi bir çapa olarak ayarladık, bu da sol tarafın kabın genişliğine göre kaymasına neden oldu. Hayal etmekte zorlanıyorsanız, parmağınızı sayfanın sağ üst köşesine koyun ve çevirin. Çıkış: translate özelliğini kullanarak onu geri döndürmeniz gerekir.

Şimdi daha iyi. Ancak aynı sorun çocuklarda görüldüğü için ilk unsur hala görünmüyor. Bu, ilk çocuğa genişliğiyle birlikte bir üst kenar boşluğu verilerek veya tüm öğeleri bir kap gibi dönüştürerek düzeltilebilir. Bulduğum en kolay yol, konteynere çocukların genişliğine eşit üst dolgu eklemek, böylece öğeler için bir tampon oluşturmaktır.

Uyumluluk

Kullanabileceğim cihazların uyumluluğunu kontrol ettim.

Masaüstü Bilgisayar

Kaydırma çubuklarının stili şimdiye kadar yalnızca Webkit / Blink tarayıcılarında çalıştığından, Firefox ve IE'de normal bir gri kaydırma çubuğu gösteriliyor. Bu, JS ile düzeltilebilir ve tamamen gizlenebilir, ancak bu başka bir öğretici için bir konudur.

Fare tekerleği ile kaydırma yapmak masaüstünde harika çalışıyor. Ancak dizüstü bilgisayarımın bu konuda kendi görüşü var. Dokunmatik ekranlı ve dokunmatik yüzeyli cihazlarda demo, div hiç döndürülmemiş gibi davranır.

Mobil cihazlar

Android'in kabın döndürüldüğünü anladığını ve sağa ve sola hızlıca kaydırarak kaydırmanıza izin verdiğini öğrendiğimde çok şaşırdım.

Aksine, iOS ile işler o kadar pürüzsüz değil. Tarayıcı, kapsayıcı hiç döndürülmemiş gibi davranır. Bu nedenle, kaydırmak için yukarı ve aşağı kaydırma kullanmanız gerekir ki bu oldukça garip. Taşma: gizli sorunu çözmez.

Sonuç

Kullanabilir miyim web sitesine göre, CSS'deki dönüşümler artık kullanıcıların% 93'ü tarafından destekleniyor (bu yazının yazıldığı tarihte, Kasım 2016). Burada sorun olmamalı.

Yine de bu yöntemi üretimde kullanmamak daha iyidir. Bazı cihazlarda test ettim, ancak hepsinde değil ve tam olarak değil.

En büyük sorun, sola ve sağa gitmek için yukarı ve aşağı kaydırmanız gereken dokunma girdileridir. Çözüm olarak, siteye bir açıklama içeren bir mesaj kaydedebilirsiniz, ancak daha sonra kullanıcıların onu okuyacağına güvenmeniz gerekir. Ve o zaman bile sağduyuya aykırı olurdu. Diğer bir çözüm, cihazlarda JS kullanarak dokunmatik girişleri almaktır, ancak o zaman her şeyi JS'de yazmak ve CSS hackimizi tamamen terk etmek daha iyidir.

Bazen, sayfada kendi kaydırma çubuğuna sahip bir blok oluşturmak yeterlidir. Elbette burada akla gelen çerçeveler, ancak kendilerininkinden çok uzun yaşadıkları için bize uymuyor. Sıradan bir div "y'nin bir kaydırma ile eklenebileceği bir çözüm istiyorum. Ve böyle bir çözüm var ve bir değil, hepsi AJAX'ın yeteneklerini kullanıyor.

JScrollPane ile dikey kaydırma

Ortak kelimeler

jScrollPane favori kitaplığınız için bir eklentidir jQuery... Dikey kaydırma bölmesi eklemenize olanak tanır. Kaydırma, istediğiniz gibi bir görünümde yapılandırılabilir. Eklenti sayfasında (bağlantı "bilgi") onu kullanmanın çeşitli yollarını bulabilirsiniz. Bunların arasında ikisini vurgulayacağım: ilki - ana yöntemleri ve parşömenlerin harici görünümlerini sunar, ikincisi - kaydırmada kaydırmanın uygulanmasının yanı sıra tüm sayfayı bu şekilde kaydırmayı gösterir.Eklentiyi resmi siteden indirebilirsiniz, ancak şunu da yapabilirsiniz: benim

Küçük numaralar

Eklentiyi pratikte birkaç kez kullandım. Böyle bir örnek görülebilir. Görünüşü standart dışı, ki bu iyi - kalbiniz ne isterse onu şekillendirebilirsiniz (ruhunuz, dostum değil, müşteriler, müşteriler - editörün Notu).

Bazen bir eklenti, fare tekerleğinin kaydırması ve içerik miktarına bağlı olarak kaydırmayı yeniden boyutlandırması için ek eklentilerin yüklenmesini gerektirir. Ancak uygulamanın gösterdiği gibi, her şey onlarsız çalışır... Tabii ki, belki eklenti düzeneğim acelem vardı, ama neredeyse hiç resmi olandan indirdim.

Misal

Kodu ayrıntılı olarak analiz etmeyeceğim, prensipte orada karmaşık bir şey yok. Ancak bazı noktalarda duracağım.

HTML dosyası. Kaydırma bloğunun yapısı aşağıdaki gibidir

Sınıfı olan bir dış div, kimliği olan bir iç div ve zorunlu bir kaydırma bölmesi sınıfı vardır. Herşey. İşlev şu şekilde adlandırılır:

Arama sırasında, kaydırma çubuğunun genişliği (kaydırma çubuğu Genişliği), oklarının boyutu (arrowSize) vb. Gibi çeşitli parametreler belirtilir. Başlıca olanlar aşağıdaki gibidir:

scrollbarWidth [sayı] - kaydırma genişliği (varsayılan 10)

scrollbarMargin [sayı] - kaydırma çubuğunun soluna doğru girinti (varsayılan 5)

wheelSpeed \u200b\u200b[sayı] - piksel cinsinden kaydırma tekerleği hızı (varsayılan 18)

showArrows [boolean] - grafik okları gösterir veya göstermez (varsayılan yanlış)

arrowSize [sayı] - showArrows \u003d true ise ok yüksekliği (belirtilmemişse CSS ile hesaplanır)

dragMinHeight [sayı] - kaydırıcının minimum yüksekliği (varsayılan 0)

dragMaxHeight [sayı] - kaydırıcının maksimum yüksekliği (varsayılan olarak 99999!)

scrollbarOnLeft [boolean] - solda kaydırma çubuğu gerekiyorsa, true olarak ayarlayın.

Şimdi jscroll.css dosyasını açalım. Aşağıdaki satırlara bakın.

8-15 satır. İç bölüm genişliği ve yüksekliği ayarla (!), taşma (gerekli bir parametre değil gibi görünüyor), doldurma büyük olasılıkla gerekli, gerisi önemli değil.

17-19 satır. Dış div. Hiçbir durumda onun için yüksekliği reçete edemezsinve float: left belirttiğinizden emin olun... Tüm bunlar tek bir amaç göz önünde bulundurularak yapılır - böylece Opera 10 normal şekilde kaydırma ile çalışır. Bu gözlemlenmezse, kaydırma div tarayıcının kaydırma ile senkronize edilecek ve sonuç olarak tamamen saçma olacaktır. Hatırla bunu.

23-57 satır. Kaydırma için görüntü stilleri

Hatların geri kalanını değiştirmek teoride gerekli değildir.

FleXcroll'da dikey ve yatay kaydırma

Bu senaryoya pek aşina değilim. Bir artı olan jQuery kullanmadan gelir (her zaman jQuery gerekli değildir). İkinci artı, yatay bir kaydırma olmasıdır. Üçüncü artı, kullanım örneklerinin eklenti ile arşive eklenmiş olması ve bunlar iyi, çeşitli, büyük saygı duymalarıdır.

Eklenti ile projeler üzerinde çalışmak zorunda değildim, ancak ilk tanıdık hoş oldu. Fark ettiğim tek dezavantaj, fareyle üzerine geldiğinizde imlecin bir "kaleme" dönüşmemesi. Bana öyle geliyor ki bu bir eksi, çünkü kaydırılıp kaydırılamayacağı sezgisel olarak anlaşılmaz. Ancak, css ile her şeyi düzeltmek için hiçbir sorun olmayacağını düşünüyorum.

Sonunda

Div'ler için dikey ve yatay kaydırma, uygulamada bir sorun değildir, her şey basit ve uygulaması kolaydır. Bunun için gidin, kullanın, yeni bir tane açın. Yorumları, soruları, dilekleri duymaktan her zaman memnun olacağım \u003d).

Merhaba arkadaşlar. Bugün sitenin düzgün kaydırılmasından bahsedeceğiz. Bu, bir düğmeyi veya bağlantıyı tıkladığınızda değil, tekerleği veya kaydırıcıyı kullanırken yumuşak kaydırmayla ilgilidir.

Çok kısa bir not, bunu sitelerden birinde uygulamak zorunda kaldım ve okuyuculardan birinin isteği üzerine daha ciddi bir makale (indirim widget'ı) hazırlarken bir blogda yazmaya karar verdim. Artem, merhaba sana. Unutmadım!

Elbette, birçok kişi zaten düzgün kaydırmaya sahip tarayıcılar kullanıyor, çoğu özel bir tarayıcı uzantısı kullanıyor, ancak hepsi değil. Sitenizi ziyaret eden cihazların çoğunda bunu daha sorunsuz hale getirelim.

Sorunsuz web sitesi kaydırma için eklenti

Bu sorunu çözmek için Malihu-özel-kaydırma çubuğu-eklentisini seçtim, çünkü birçok özelliği var:

• Dikey ve / veya yatay kaydırma çubuğu.
• Yapılandırılabilir kaydırma momentumu.
• Fare tekerleği ile düzgün kaydırma.
• Kaydırıcı için düzgün kaydırma.
• Klavye desteği ve oklarla veya PgUp / PgDn ile yumuşak kaydırma.
• Dokunmatik ekran desteği.
• Temaları kullanmaya hazır.
• CSS ile manuel özelleştirme.
• Kaydırıcıyı görüntülemek için farklı seçenekler.
• Sayfada bulunan çeşitli öğelere yumuşak kaydırma ekleme yeteneği.

Elbette çoğu kişi için bu işlevsellik gereksiz olabilir. Kaydırmayı sadece tekerlekle düzeltmek istiyorsanız, sonunda bu amaçlar için çok basit bir çözümü analiz edeceğiz.

"Durun, farklı bloklarda düzgün kaydırma iyidir, ancak sitenin düzgün kaydırılması nereden geldi?" - diyorsun. Sakinlik. Bununla şimdi ilgileneceğiz.

Eklenti bağlantıları

Seçilen çözüm bir jQuery eklentisi olduğundan, ilk adım, bağlamadıysanız jQuery'nin kendisini siteye bağlamaktır.

Şimdi yukarıdaki bağlantıdan sorunsuz kaydırma için eklentiyi indirin ve siteye 2 dosya bağlayın.

• jquery.mCustomScrollbar.concat.min.js
• jquery.mCustomScrollbar.min.css

Aşağıdaki yapıyı elde edersiniz:

Unutulmaması gereken en önemli şey, tüm jQuery bağımlı eklentilerinin jQuery'nin kendisinden sonra dahil edilmesi gerektiğidir.

Her şey bağlandıktan sonra, betiği başlatmanız gerekir:

Ve kaydırmanın belgeye uygulanmasını sağlamak için CSS'ye birkaç basit kural ekleyin. Stil sayfanızın en başına aşağıdaki biçimlendirmeyi ekleyin:

Gövde, html (yükseklik:% 100; taşma: gizli;)

Bu, standart tarayıcı kaydırma çubuğunu kaldıracak ve komut dosyasının anlayabileceği yüksekliği ayarlayacaktır. Hazır bir web sitesine bağlanıyorsanız korkmayın. Vakaların% 99'unda bu, işaretlemenizi hiçbir şekilde etkilemeyecektir.

İlkiyle aynı şekilde bağlanır, yalnızca 3 ayara sahiptir ve yalnızca 2,6 kilobayt ağırlığındadır:

$ (function () (jQuery.scrollSpeed \u200b\u200b(100, 800, "easOutCubic");))

İlk sayı kaydırma adımı olduğunda, ikinci sayı hızdır ve üçüncüsü animasyon türüdür.

Bu kadar. Herkese güle güle.

Bazen, oraya tam olarak sığmayan küçük bir pencereye büyük bir metin parçası yerleştirmek gerekir, bu sorunu çözmek için bir kaydırma katmanı oluşturmak kolaydır - kayan div.

Sürer

Sabit boyutlu katman ve CSS stili.

CSS

.Scroll CSS sınıfı, 600 piksel uzunluğunda ve 300 piksel yüksekliğinde parametreleri, dolgu, kenarlık ve arka plan rengini ayarlar. FAKAT! En önemlisi, overflow: auto parametresi, kaydırma çubuğunu metin miktarı katman boyutundan daha büyük olduğunda görünecek şekilde ayarlar.

Kaydırma (genişlik: 500px; yükseklik: 300px; / * gerekli sabit boyut * / overflow: auto; / * kaydırma gerektiği gibi görünür * / padding: 10px 20px; border: # 999 1px düz; arka plan rengi: #FAFAFA;)

HTML

Sonuç

Ekranda gri kenarlı küçük bir metin kutusu göreceksiniz.

En yaygın olanı, etilen glikol ve su (damıtılmış) ve bir katkı kompleksi içeren etilen glikol soğutuculardır.

Antifrizler, ilgili konsantrelerin sulu çözeltileri olarak elde edilir. Çalışma sırasında antifriz kalitesi yoğunluk ile kontrol edilebilir. Çalışma sırasında, önce periyodik olarak yeniden doldurulması (damıtılması) gereken soğutucudan su buharlaşır. Köpüklenmeye ve sistemden sıvı çıkmasına neden olduklarından, antifriz içerisine benzin ve yağ girmemesine dikkat edilmelidir.

"Tosol" ve "Lena" gibi soğutucuların hizmet ömrü, katkı maddelerinin hizmet ömrü ile sınırlıdır ve genellikle 2 yıldır; çeşitli otomobiller için ortalama kilometre 50.000 km'dir.

Kullanılmış bir araca ilk bakım yaparken, soğutucuyu değiştirin. Eski sıvıyı boşalttıktan sonra sistemi temiz suyla doldurun, motoru çalıştırın ve 15-20 dakika rölantide bırakın; daha sonra suyu boşaltın ve sistemi yeni soğutma sıvısı ile yeniden doldurun.

3. CSS bloğunda dikey ve yatay kaydırmaya zorlama
4. Kayan bir div bloğu örneği

Bu makalede, yatay ve dikey kaydırma özelliğine sahip sabit boyutta bir blok (div) oluşturma konusunu analiz edeceğiz. Bu, CSS kullanılarak yapılabilir. Bunun sorumlusu taşma özelliği.

Yararlı taşma özelliği hakkında

Emlak taşma bir blok elemanının içeriğini görüntülemekten sorumludur. İçerik tam olarak sığmadığında ve blok alanının dışına çıktığında kullanılabilir.

overflow-x - bir blok elemanının içeriğini yatay olarak görüntülemekle sorumludur.
taşma-y - bir blok elemanının içeriğini dikey olarak görüntülemekle sorumludur.

CSS kodu

Prokrutka (
taşma: otomatik; Yatay kaydırma için / * özelliği. İçerik bloktan büyükse otomatik * /
}

Taşma özellikleri ve değerleri

gözle görülür - belirtilen genişliğin ötesinde bile öğenin tüm içeriğini görüntüler.
gizli - yalnızca öğenin içindeki alan görüntülenir, geri kalanı gizlenir.
kaydırma - Zorla yatay (y) veya yatay (x) kaydırma çubuğu eklendi.
oto - blok daha küçükse otomatik olarak yatay bir kaydırma çubuğu eklenir.

Bir CSS sınıfı örneği düşünün. Genişlik ve yükseklikte, bloğun istenen genişliğini ve yüksekliğini (bloğun içeriği bunların ötesine geçmeyecektir) ve overflow özelliği ile: auto; gerekirse yatay kaydırmayı ayarlayın

CSS kodu

Prokrutka (
genişlik: 150px; / * bloğumuzun genişliği * /
yükseklik: 100px; / * bloğumuzun yüksekliği * /


taşma: otomatik; Yatay kaydırma için / * özelliği. Daha fazla blok varsa otomatik * /
}

CSS bloğunda kaydırmaya zorla

Ayrıca yükseklik ve genişlikte kaydırmaya da zorlayabilirsiniz. Bunu yapmak için her eksen: overflow-y: scroll; (dikey) taşma-x: kaydırma; (yatay) kaydırma parametresini, zorunlu kaydırmayı belirtiriz.

HTML ve CSS kodu

Prokrutka (
yükseklik: 150px; / * bloğumuzun yüksekliği * /
arkaplan: #fff; / * arka plan rengi, beyaz * /
border: 1px katı # C1C1C1; / * blok sınırının boyutu ve rengi * /


}

Kaydırma div bloğu örneği

HTML ve CSS kodu

Özelliklerden biri taşma kaldırılabiliyorsa, sadece bir eksen boyunca kaydırma olacaktır ki bu oldukça yeterlidir.
Komut dosyası çalışmasını görüntüle Örneğin altında.