CSS kaydırma çubuğunu gizle, ancak öğe kaydırılabilir olsun

Öğeler adında bir öğem var ve öğenin içindeki içerik öğe yüksekliğinden daha uzun, kaydırılabilir yapmak ama kaydırma çubuğunu gizlemek istiyorum, bunu nasıl yaparım?

<div class="left-side">
    <div class="items" style="display:block;width: 94%;margin: 0 auto;overflow: hidden;">
    </div>
</div>

.left-side {
    width: 1470px;
    padding-top: 20px;
    height: 878px;
}

Sol taraftaki sınıf taşmasını otomatik olarak ayarlamayı denedim, ancak bu hiçbir işe yaramadı.

Programlama
html css
2017ösp31ös13 Nisan 2017 в 1:31
14 görünümler
Çözüm

Saklayabilirsin:

html {
  overflow:   scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

Daha fazla bilgi için bakınız: https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll

kylestephens
Edited answer 2019ösp38ös12 Ocak 2019 в 12:38
Yorumlar (6)

Kaydırma çubuğundan gerçekten kurtulmak istiyorsanız, bilgileri iki ayrı sayfaya bölün.

Jakob Nielsen tarafından kaydırma çubukları hakkında kullanılabilirlik yönergeleri:

Kaydırma ve kaydırma çubukları için beş temel kullanılabilirlik kuralı vardır:

Bir alanda kayan içerik varsa bir kaydırma çubuğu sunun. Şuna güvenmeyin otomatik kaydırma veya sürükleme sırasında, insanlar fark etmeyebilir.

  • Gizle tüm içerik görünür durumdaysa kaydırma çubukları. İnsanlar bir kaydırma çubuğu görürlerse ek içerik olduğunu varsayar ve kaydırma yapamazlarsa hayal kırıklığına uğrarlar. kaydırın.
  • GUI standartlarına uyun ve aşağıdaki gibi görünen kaydırma çubukları kullanın kaydırma çubukları.
  • Web sayfalarında yatay kaydırmayı önleyin ve en aza indirin başka bir yerde.
  • Tüm önemli bilgileri katlamanın üstünde gösterin. Kullanıcılar genellikle görebildiklerine dayanarak kalmaya veya ayrılmaya karar verirler kaydırma yapmadan. Ayrıca dikkatlerinin sadece %20'sini katın altında.

Kaydırma çubuğunuzun yalnızca gerektiğinde (yani aşağı kaydırılacak içerik olduğunda) görünür olmasını sağlamak için overflow: auto kullanın.

Yvonne Aburrow
Edited answer 2017ösp3ös14 Nisan 2017 в 2:03
Yorumlar (2)

SlimScroll]1 eklentisini kullanarak bir div'i overflow: hidden; (yani kaydırma çubuğu gizli) olarak ayarlanmış olsa bile kaydırılabilir hale getirebilirsiniz.

Bu eklentiyi kullanarak dokunmatik kaydırmanın yanı sıra kaydırma hızını da kontrol edebilirsiniz.

Umarım bu yardımcı olur :)

Yorumlar (0)