g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

Web ön uç çalışma notları, öğrenme yol haritası, eksiksiz ön uç kendi kendine çalışma eğitimi + araçlar + çerçeve

Sorun açıklaması

"Kaydırma çubuğu" nedir?

Kaydırma çubuğu, aşağıdaki şeklin sağ tarafında kırmızı bir çizgiyle çerçevelenen kısmı ifade eder:

Web sayfasının içeriği pencereden daha büyük olduğu sürece, kaydırma çubukları görünecektir.

Genel olarak, olmadığı sürece

vücut

Seviye kaydırma çubuğunu kullanın ve ardından

taşma: gizli;

Kaydırma çubuğu sorununu çözebilir, ancak şu anda sayfa kaydırılamayacaktır.

Zaten birçok gizli olmayan

vücut

Hiyerarşik kaydırma çubuğu ayrıca sayfa öğretimini kaydırabilir, bu nedenle bu makale tarayıcının nasıl gizleneceğine odaklanır (yani,

vücut

Seviye) kaydırma çubuğu.

Çözüm

Farklı tarayıcılar için kaydırma çubuğunu gizlemenin farklı yolları vardır. Aşağıda, üç ana tarayıcı kromu (kenar dahil) ve firefox açıklanmaktadır:

Chorme

body :: - webkit-scrollbar {display: none;}

IE / Edge

body {-ms-overflow-style: yok;}

Firefox

Firefox, üçünden en sorunlu olanıdır:

html {overflow: -moz-hidden-unscrollable; / * Dikkat! Yalnızca gizli'yi tıklarsanız, diğer gizli kromlarda sorunlar olur * / yükseklik: 100%;} gövde {yükseklik: 100%; genişlik: hesap (100vw + 18px); / * Tarayıcı kaydırma çubuğunun uzunluğu yaklaşık 18px * / overflow : Oto;}

Henüz bitmedi, bazı yerlere eklemelisin

genişlik: 100vw;

Varsayalım

HTML

Şöyle görünüyor: < vücut > < div id = "örnek-1" > < p > Kardeş Nantaizi, Jiazheng Huoshu'yu görmeye geldiğinde ne yapacağını bilmiyor. < / p > < / div > < makale kimliği = "örnek-2" > < h1 > İtalyan ailesinin onaylamaması neredeyse siyasi değil! < / h1 > < p > Deyan He Jinqili Meixihai'nin bir yabancısı var. Malzeme düşük. < / p > < buton > Çek < /buton > < /makale > < /vücut >

Sonra senin

CSS

Sadece şunu ekleyin: # örnek-1 {genişlik: 100vw;} # örnek-2 {genişlik: 100vw;}

sonuç olarak

Özetlemek gerekirse, üç büyük tarayıcının kaydırma çubuklarının gizli ve kaydırılabilir olmasını istiyorsanız,

CSS

açık en azından Şöyle görünmek için: html {overflow: -moz-hidden-unscrollable; height: 100%;} body :: - webkit-scrollbar {display: none;} body {-ms-overflow-style: none; yükseklik:% 100; genişlik: hesap (100vw + 18px); taşma: otomatik;}

Gelince

genişlik: 100vw;

Nereye ekleneceği size bağlıdır

HTML

Yapısı nedir?

avantaj

Okuyucuların, kaydırma çubuğu kısayken web sayfasından okumak için çok tembel olmak veya kaydırma çubuğunu düz aşağı çekmek yerine metne daha fazla odaklanmasına olanak tanır. Diğer bir deyişle okuyucu, içeriği yavaşça okumaya zorlanır.

Dezavantaj

Okuyucu geriye bakmak isterse, uzun zaman alabilir. Bu nedenle, kaydırma çubuğunu daha uzun bir metin için gizlemek istiyorsanız, okuyucuların hızlı bir şekilde belirli bir yere atlayabilmeleri için bir gezinme çubuğuna sahip olmanız önerilir.

Ön uç çok popüler ve birçok kişi ön ucu kendi başına öğrenmek istiyor.

Geçmiş bir insan olarak, kendi kendine çalışmanın zor işini biliyorum.

İster acemi olun,

Halihazırda çalışan ön uç geliştiriciler, ondan istediğiniz bilgileri alabilir!