Dikey kaydırma div. Saf CSS Yatay Kaydırma

Bu katmanın içinde

- açılış etiketi ve

Bu, katmanın içindeki metindir

Div etiketinin stil özniteliğinde ve katmanın kaydırma çubuklarının kurallarını da belirtin:

Burada overflow:auto , kaydırma çubukları otomatik olarak görünecektir, yani katmanın içeriği verilen boyutlara uymadığında. Otomatik kaydırma ile değiştirilirse, bu çubuklar, gerekip gerekmediğinden bağımsız olarak her zaman mevcut olacaktır. Ve gizli değer tam tersi bir etkiye sahip olacaktır - bu kabın içeriği kenarlarının ötesinde görünmese bile görünmeyecektir.

Genel olarak kaydırma çubukları eklemek için aynı yöntemi kullanın. Varsayılan olarak, gerektiği gibi görünürler, ancak herhangi bir nedenle üzerinde sürekli bulunmalarına ihtiyaç duyulursa, kaynak html koduna uygun stil kuralı eklenmelidir. Sayfa kodunda belge başlığının kapanış etiketini bulun ve bu stil talimatlarıyla önüne geçin:

Günümüzde kendi web sitenize sahip olmak bir lüks değil, bir zorunluluktur. Oluşturulması belirli beceriler ve html bilgisi gerektirir. Basit bir web sitesi oluşturmak oldukça kolaydır. Ancak, onu dekore etmek ve siteye ek işlevsellik sağlayan etkileşimli öğeler oluşturmak yeni başlayanlar için zorluklara neden olacaktır. Site ziyaretçilerinin rahatlığını artıran bu etkileşimli unsurlardan biri de bir şerittir. taslak. Özellikle sitenin alanlarında, betiklerle (sitenin kullanıcılarla etkileşimi) bağlantısını sağlayan kullanışlıdır.

İhtiyacın olacak

• İnternet veya herhangi bir html eğitimi

Talimat

Herhangi birinde en önemli şey rahatlıktır. Strip kullanma fikri taslak sitenizde, yalnızca arzunuza göre değil, gerekliliğine göre belirlenirse uygun olacaktır. Yerleştirmek istediğiniz düzeni yapın Lane taslak. Kaydırmak için bir yer seçin (çizgiler olarak da adlandırılır) taslak).

Şerit için bir yer seçin taslak ilgilendiğiniz sayfada. Bir öğeye (metin alanı veya açılır liste gibi) bağlı olmalıdır. Bu yeri piksel veya yüzde olarak hesaplamanız gerekir. Özellikle site düzeni net bir yapıya sahipse bunu yapmak zor değildir.

BODY etiketleri arasına standart kaydırma kodunu eklemelisiniz. Herhangi bir html ders kitabında bulabilirsiniz. İki seçenek vardır - ya bu parçayı doğrudan sayfanın html koduna ekleyin ya da css stil sayfasına ekleyin. İkinci yöntem, birini değil tüm siteyi değiştiriyorsanız daha uygundur. Ardından şeridin renk parametrelerini girmeniz gerekir. taslak, aksi takdirde gri ve ilgi çekici olmayacaktır. Şekil, kaydırma öğelerini gösterir ve etiketler. Parametreler şekilde görüldüğü gibi noktalı virgül ile girilmelidir.

Şimdi kesinlikle iyileştirmelerinize ihtiyacınız var. Soymak taslak tüm tarayıcılarda aynı görünüyordu, ana tarayıcılarda kontrol edin - Internet Explorer, Mozilla Firefox ve Opera. Bunlardan birindeyse, ilk adıma geri dönün ve hataları düzeltin.

faydalı tavsiye

Bir web sayfası için kaydırma çubuğu oluşturmanın kolay bir yolu vardır. Sitenizin yükseklik parametresini %75 olarak ayarlayın, ardından kaydırma kendi kendine görünecektir. Doğru, renk şemaları hala ince ayar yapmaya değer.

Kaynaklar:

• 2019'da yeni başlayan web geliştiricileri için site

Talimat

Doğru kararı ver. Bant taslak sitenizde, yalnızca sizin isteklerinize göre değil, kullanıcı için ek kolaylık yaratma ihtiyacı tarafından belirlenirse görünmelidir. Göndereceğiniz sayfanın düzenini tasarlayın Lane taslak. Onun için doğru yeri seçin.

Parşömenin sert bir şekilde bağlanmasını sağlayın (böylece onlar da arayabilir Lane taslak) belirli bir sayfa öğesine. olan bir metin alanı olabilir. Şeritteki park alanını piksel ve yüzde cinsinden hesaplayın. Sayfa açıkça yapılandırılmışsa, bu hiç de zor olmayacaktır.

Standart bir şerit kodu ekleyin taslak gövde etiketleri arasında. Neyin tehlikede olduğunu bilmiyorsanız, html düzeniyle ilgili herhangi bir öğreticiyi indirin. Açıkça tarif edilecektir, böyle bir kod. Bu gibi durumlar için hazır şablonlara sahip olmak en iyisidir, böylece program kodunun bazı bireysel öğelerini oradan alabilirsiniz, bu da hayatı büyük ölçüde kolaylaştırır. Demek kodu buldun. Ya doğrudan sayfa kodunun içine yerleştirin ya da çok daha kolay olan css tablosuna ekleyin, ancak bir tanesini değil, sitenin tüm sayfalarını değiştirmeniz durumunda.

Şerit için renk seçeneklerini ayarlayın, aksi takdirde büyük olasılıkla sitenin tasarımına uymayan standart bir gri renk olacaktır. Bu parametreler, sayfadaki diğer grafik öğeleriyle aynı sırada ayarlanır. Mozilla, Opera ve Explorer gibi birden çok tarayıcıda test edin. Bunlardan herhangi birinde varsa, program kodundaki hataları düzeltin.

Site yüksekliği parametresini %75 olarak ayarlayın, ardından kaydırma kodu otomatik olarak girilecektir. Ama yine de değişmen gerekiyor Lane taslak, ve özellikle - grafik parametreleri. Bu, önceki paragraflarda açıklanmıştır.

3. CSS bloğunda dikey ve yatay kaydırmayı zorlayın
4. Kayan div örneği

Bu yazımızda yatay ve dikey kaydırma özelliği ile sabit boyutta bir blok (div) oluşturma konusunu ele alacağız. Bu, CSS kullanılarak yapılabilir. bundan sorumlu taşma özelliği.

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

Mülk taşma blok öğesinin içeriğini görüntülemekten sorumludur. İçeriğin tam olarak sığmadığı ve blok alanının dışına çıktığı durumlarda uygulanabilir.

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

CSS Kodu

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

taşma özellikleri ve değerleri

gözle görülür- öğenin tüm içeriği, ayarlanan genişliğin dışında bile görüntülenir.
gizlenmiş- yalnızca öğenin içindeki alan görüntülenir, gerisi gizlenir.
taslak- yatay (y) veya yatay (x) kaydırma çubuğu eklemek zorunda kaldı.
Oto- Blok daha küçükse otomatik olarak yatay kaydırma çubuğu ekler.

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

CSS Kodu

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


taşma: otomatik; /* yatay kaydırma özelliği. Bir bloktan fazlaysa otomatik */
}

Bir CSS bloğunda kaydırmaya zorlama

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

HTML ve CSS kodu

Prokrutka (
yükseklik:150 piksel; /* bloğumuzun yüksekliği */
arka plan: #fff; /* arka plan rengi, beyaz */
kenarlık: 1 piksel düz #C1C1C1; /* kenarlık boyutunu ve rengini engelle */


}

Kaydırma div örneği

HTML ve CSS kodu

Özelliklerden biri taşma kaldırılabilir, ardından yalnızca bir eksen boyunca kaydırma kalır, bu da yeterlidir.
Komut dosyasını görüntüle Örneğin aşağıda.

Arayüzler ,

kullanılabilirlik,

SketchBuilder Blogu

• Tercüme

Son zamanlarda, yatay kaydırma kullanarak web siteleri tasarlama yaklaşımı giderek daha popüler hale geldi. Bu yaklaşımın uygulanabilirliği ve kullanılabilirliği konusunda çok endişeliyiz. Bu sorunu anlamak için yatay kaydırma ile ilgili bir makaleyi tercüme ettik. Sizi materyali okumaya ve bu konuyu yorumlarda tartışmaya davet ediyoruz ...

Yayının orijinal adı: “Yatay kaydırma davası”…

Her şey zaman zaman yeniden düşünülür. Bu nedenle, yatay içeriğe sahip sitelerin moda haline gelmesi şaşırtıcı değil. Web'deki web sitelerinin büyük çoğunluğu şu anda dikey kaydırma kullandığından, bu cesur ve etkileyici bir tasarım yeniliğidir.

Dikey kaydırma yaklaşımının popülaritesinin nedeni açıktır - uygulaması daha kolaydır, daha tanıdık ve daha yaygın olarak kullanılır. Dikey kaydırmalı web siteleri de daha verimli olarak kabul edilir. Çoğunluğun görüşü bu olduğu için yatay kaydırma kullanımı daha da sapkın ve cesur hale geliyor.

Yatay kaydırmanın “yolunu” seçenler, kendi seçtikleri bakış açısından tartışırlar. Ve bu yöntemi seçen kuruluşlar, sitelerini sanat eseri olarak ilan ediyor.

(http://www.guillaumejuvenet.com/)

Yatay siteler, kendi benzersizliklerinin ve sosyal çerçeveye uyma konusundaki isteksizliklerinin bir ifadesidir. Sonuç olarak, bu site tasarımını kullanan bir marka, genellikle "ilginç" ve "ilginç" olarak ün kazanır.

Neden bazı insanlar yatay kaydırma kullanıyor?

Siteleri yukarı ve aşağı kaydırmak konuşulmayan bir kural haline geldiğinden, başka türlü olabileceği pek çok kişinin aklına gelmez. Kaydırma tekerleğine sahip bilgisayar fareleri, dizüstü bilgisayarlarda kayan dokunmatik yüzeyler bu fikri daha da köklendirdi. Yatay kaydırma kullanan web siteleri, kendi bireyselliklerini iddia ederek standart web sitelerinin normlarına açıkça meydan okur.

Mobilden bahis yapmak o kadar iyi bir fikir olmayabilir

Akıllı telefonlarda ve tabletlerde yatay kaydırma artık yeni değil ve sadeliği nedeniyle oldukça yaygın olarak kullanılıyor. Bir dizi farklı cihazda kullanımı, genellikle daha tutarlı bir içerik sunumuna atfedilir. Öte yandan, yatay kaydırma masaüstü bilgisayarlarda çok daha az yaygındır.

Bunun temel nedeni yukarıda zaten belirtilmiştir. İnsanların bilmediği şey, içeriği basitçe kaydırarak farklı bir şekilde görüntüleyebilmenizdir.

Cep telefonu veya tablet ekranları ile masaüstü ekranları birbirine göre oldukça spesifik kabul edildiğinden benzerlik burada geçerli değildir. Tabletlerde ve telefonlarda yaygın olduğu için masaüstünde yatay kaydırmayı kullanamazsınız.

Bu, insanların bu cihazları farklı zihniyetlerle kullanması ve kabul edilen durumların değiştirilmesi bazı yanlış anlaşılmalara yol açabileceği ve kullanıcıları rahatlık alanlarının dışında bırakabileceği ilkesine dayanmaktadır.

Yatay kaydırmanın uygulanmasındaki ana dezavantaj, kullanıcıların sayfadaki içeriği görüntülemek için benzersiz mekanikleri değil, web arayüzlerinde tekdüzeliği tercih etmesidir.

İçerik alanı için dikey alanın verimli kullanımı

Dikey bir düzende, tüm içerik, ne kadar önemli olursa olsun, birbiri ardına gider. Anahtar bilgiler, sayfada konumlandırılarak değil, yalnızca tasarımla vurgulanabilir. Bir tasarımcının yapabileceği tek şey, önemli bilgileri sayfanın en üstüne yerleştirmektir.

Popüler dikey düzenlerin aksine, yatay düzenlerin bir avantajı vardır. Yatay kaydırma alanındaki bilgilerin yalnızca küçük bir bölümünü düzgün bir şekilde sağlarlar. Ve önemli bilgiler dikey bir alana sabitlenebilir ve kullanıcıların dikkatini yalnızca tasarımla değil, aynı zamanda konumlandırmayla da ona çeker.

Gerçekten istiyorsanız, yatay kaydırmayı ne zaman kullanmalısınız?

(http://qandhlondon.com/)

Yatay içeriğe sahip siteler, aynı anda birkaç nesneyi görüntülemeniz gereken durumlar için en uygundur: grafik görüntüler, küçük bilgi blokları, simge grupları veya daha ayrıntılı bir açıklamaya bağlanan önizlemeler.

"Masaüstü" sitelerin mobil sürümleri veya mobil cihazlardan görüntülenmek üzere tasarlanmış web siteleri - bu, yatay kaydırmanın tamamen uygun olduğu kapsamdır. Bununla birlikte, bir dizi başka siteye de iyi bir şekilde katkıda bulunur ve büyük miktarda bilgiyi basit ve uygun maliyetli bir şekilde görüntülemelerine olanak tanır.

kullanılabilirlik sorunu

(http://movingislands.com/en)

Bugün birçok kullanıcı yatay kaydırmaya aşina ve hatta aşina olsa da (sayfanın tüm içeriği değiştiğinde), çoğu hala yatay kaydırmayı (içeriğin düzgün yüklenmesiyle) kınıyor. Birçok kullanıcıdan olumsuz geri bildirim almaya devam ediyor ve bu nedenle dikkatli kullanılmalıdır. Genellikle markalaşma gibi bireyselliği göstermek için kullanılır. Ancak bu kullanımla bile, birçok insan için olağandışıdır.

Kullanıcılar yatay kaydırma ile site bloklarını yok sayar

Yatay kaydırmanın neden olduğu ana tepkilerden biri, onunla bölümleri görmezden gelmektir. Kullanıcının konfor alanından çıkışını kışkırttığı için.

İnsanlar, genellikle büyük okları ve diğer yatay gezinme öğelerini farkedilmeden ve dokunulmadan bırakarak, yatay kaydırma web sitesi gezinmesiyle ilgili açık ipuçlarını bile fark etmeme eğilimindedir.

(http://www.lorenzobocchi.com/)

Bunun başlıca nedeni, bu kullanım biçiminin beklenen çalışma modeline uymaması ve sonuç olarak kabul edilebilir veya anlamlı olmamasıdır.

Tam sayfa çevirmelerin (kağıt kitaplara ve dergilere benzer) yüksek kullanıcı beklentilerine sahip olduğu siteler için nadir değildir, ancak sonuç olarak, insanlar genellikle sağlanan içerikten hayal kırıklığına uğrarlar. Bu nedenle, biri için iyi bir çözüm (aynı kağıt kitaplar ve dergiler) bir başkası için zarar verebilir.

Nasıl doğru?

(http://www.themobileplaybook.com/en-us/#/overview)

Yine de sitenizde yatay kaydırma uygulamak ve aynı zamanda kullanıcı kaybetmemek istiyorsanız ne yapmalısınız? Her şey gerçekten basit - ek gezinme seçenekleri ekleyin.

Yatay kaydırma mekaniğine, yalnızca bir bölümden diğerine geçmenizi değil, aynı zamanda bazı bölümleri tamamen atlamanızı sağlayacak bir menü ekleyin. Bu, esneklik getirecek ve daha fazla kullanıcıya ilgilendikleri bölümlere göz atma konusunda ilham verecektir.

Yatay kaydırma çubuğu, ne kadar içeriğin hala izlenmediğini göstermek için de bir zorunluluktur. Bazen bu, insanları siteden ayrılmak üzereyken biraz daha okumaya motive eder.

Dikkate Alınması Gerekenler

(http://www.richard-hill.org.uk/)

Dokunmatik ekranlar, tabletler, hepsi bir arada dokunmatik ekranlı PC'ler gibi yeni teknolojilerin ortaya çıkmasıyla birlikte yatay kaydırma kullanımına yönelik tutumlar yavaş yavaş değişse de, bu yöntem hala baskın değildir.

Analog klavyelerde yukarı/aşağı tuşlarının kullanımı sol/sağ tuşlardan daha kolaydır. Ancak dokunmatik yüzeyde, yatay kaydırma uygularken yeni hareketler eklemek daha uygun olacaktır.

Kaydırma hızı da optimize edilmelidir. Çok hızlı kaydırmak baş ağrısına neden olabilir ve çok yavaş kaydırmak çok can sıkıcı olabilir.

Eskiden soldan sağa, yavaş yavaş sayfayı aşağı kaydırarak okumamıza rağmen artık bu alışkanlık değişiyor. E-kitapların ve akıllı telefonlar, tabletler ve dokunmatik yüzeyler için çeşitli uygulamaların ortaya çıkmasıyla birlikte, insanlar okurken yavaş yavaş çevirmeye alışıyorlar. Bununla birlikte, günlük hayata yeni kavramlar getirirken kullanıcıların karşılaşabilecekleri şeyleri hesaba katmak her zaman önemlidir.