Div'de CSS özelleştirilmiş kaydırma çubuğu

327

Kaydırma çubuğunu divsayfanın tamamı için değil, CSS (Basamaklı Stil Sayfaları) aracılığıyla nasıl özelleştirebilirim ?

css  html  scrollbar 
— harisdev
kaynak
overflow:auto;Sadece uygula <div>. Daha fazla arka plan detayı var mı?
— Rob W
Bunu yaptım, ama özel kaydırma çubuğunu ihtiyaç uhm .. kaydırma çubuğu tasarımı
— harisdev
Özel renk? Bu yalnızca IE'de desteklenir, diğer modern tarayıcılarda desteklenmez. Bu saf CSS kullanılarak gerçekleştirilemez.
— Rob W
1
En basit JS çözeltisi (CSS sahip hiçbir çapraz tarayıcı desteği) - yaireo.github.io/fakescroll
— vsync
— Buzinas

Yanıtlar:

688

Kaydırma çubukları, CSS ve tarayıcı uyumluluğu hakkındaki en son bilgileri birleştirmenin yararlı olacağını düşündüm.

Kaydırma Çubuğu CSS Desteği

Şu anda, tarayıcılar arası kaydırma çubuğu CSS stil tanımları yoktur. Sonunda bahsettiğim W3C makalesi aşağıdaki ifadeye sahip ve yakın zamanda güncellendi (10 Ekim 2014):

Bazı tarayıcılar (IE, Konqueror) standart olmayan 'scrollbar-shadow-color', 'scrollbar-track-color' ve diğer özellikleri destekler. Bu özellikler yasadışıdır: Ne CSS spesifikasyonlarında tanımlanmış ne de tescilli olarak işaretlenmemiştir ("-vendor-" ön ekiyle)

Microsoft,

Diğerlerinin de belirttiği gibi, Microsoft kaydırma çubuğu stilini destekler, ancak yalnızca IE8 ve üstü için.

Misal:

<!-- language: lang-css -->

    .TA {
        scrollbar-3dlight-color:gold;
        scrollbar-arrow-color:blue;
        scrollbar-base-color:;
        scrollbar-darkshadow-color:blue;
        scrollbar-face-color:;
        scrollbar-highlight-color:;
        scrollbar-shadow-color:
    }

Chrome ve Safari (WebKit)

Benzer şekilde, WebKit'in artık kendi sürümü var:

Firefox (Gecko)

64 sürümü itibariyle Firefox özellikler scrollbar-color(kısmen W3C taslağı ) ve scrollbar-width( W3C taslağı ) ile kaydırma çubuğu stilini destekler . Uygulama hakkında bazı iyi bilgiler bu cevapta bulunabilir .

Çapraz Tarayıcı Kaydırma Çubuğu Şekillendirme

JavaScript kitaplıkları ve eklentileri çapraz tarayıcı çözümü sağlayabilir. Birçok seçenek var.

Liste uzayıp gidebilir. En iyi seçeneğiniz mevcut çözümleri araştırmak, araştırmak ve test etmektir. Eminim ihtiyaçlarınıza uyacak bir şey bulabileceksiniz.

Yasadışı Kaydırma Çubuğu Şekillendirmesini Önleme

"-Vendor" ile düzgün bir şekilde önek eklenmemiş kaydırma çubuğu stilini önlemek istemeniz durumunda, W3C'deki bu makale bazı temel talimatları sağlar . Temel olarak, tarayıcınızla ilişkili bir kullanıcı stili sayfasına aşağıdaki CSS'yi eklemeniz gerekir. Bu tanımlar, ziyaret ettiğiniz sayfalardaki geçersiz kaydırma çubuğu stilini geçersiz kılar.

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Yinelenen veya Benzer Sorular / Kaynak Yukarıda Bağlantılı Değil

Not: Bu cevap çeşitli kaynaklardan gelen bilgileri içermektedir. Bir kaynak kullanılmışsa, bu cevaba da bağlanır.

— JSuar
kaynak
228
Web yirmi yılı aşkın bir süredir var ve hala kaydırma çubuklarını şekillendirmenin standart bir yolu yok. Yirmi yıllık standart komiteleri, insanların bir şeyleri kaydırdığını fark etmiyor. Bunun beni nasıl hissettirdiğini yeterince ifade edecek yavaş, alaycı alkışlama oranı yoktur. Ancak birinci ve ikinci alkış arasındaki 20 yıllık bir gecikme sanırım uygun olacaktır. Bazı açılardan, WWW çıktığında henüz doğmadım ve şu anda bir bilgisayar mühendisiyim. Gidilecek yol, W3C.
— Parthian Shot
3
Sadece iki sentimi eklemek için: Gmail ve Youtube, Chrome'da kaydırma çubuğunu ve Explorer ile Firefox'ta yerel olanı stilize etti. Bu standartlar onlar için yeterince
— iyiyse
9
@ PaulD.Waite Belki, ama bu her şeye uygulanabilir. Ve CSS tam olarak bir dil olarak var, böylece tasarımcılar varsayılanları geçersiz kılmayı seçebilirler. Tüm fikir, kötü bir UI tasarımcısının herhangi bir öğeyi bilinçsiz hale getirebileceği, ancak site tasarımcısının yetersiz olduğunu varsaydığınızda, sayfa özelleştirmesine izin vermenin anlamı nedir?
— Part Atışı
6
@ PaulD.Waite Açıkçası, bu şeylerden biri değil. Kısmen, site tasarımcının tamamen kontrol etmesi gereken ekran alanında olduğu için, hiçbir güvenlik riski oluşturmaz ve kısmen de açıkça - pratikte - bu bir sorun değildir. Birçok site, kaydırma çubukları gibi görünen ve davranan şeyleri yapmak için kendi korsanlıklarını uygular ve iyi çalışırlar. Sadece iyi çalışıyorlar ve daha iyi görünüyorlar, ama insanlar aslında onları nasıl kullanacaklarını anlıyorlar, ki asıl nokta bu. Ne yazık ki, onlar hack olduklarından, bazen yazdırma işlevi gibi şeylerle iyi oynamazlar.
— Part Atışı
5
Bu cevap, kaydırma çubuğu stillerini sayfanın tamamı yerine belirli bir div öğesine nasıl uygulayacağı sorusunu tamamen ele almıyor .
— Stewart
14

Bunu dene

Kaynak: https://nicescroll.areaaperta.com/

Basit Uygulama 

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

Bu bir jQuery eklentisi kaydırma çubuğudur, bu nedenle kaydırma çubuklarınız kontrol edilebilir ve çeşitli işletim sistemlerinde aynı görünür.

— Dilusha Gonagala
kaynak
Muhtemelen özelleştirilebilir olduğuna eminim, ancak sayfalarındaki demo çok yavaş kaydırılıyor ve kaydırma çubuğunun yakalanması çok zor.
— Kaz
4
Hemen hemen tüm jQuery eklentileri gibi - [ürperticiler] - bu, yerel, dişli, GPU hızlandırmalı kaydırma uygulamalarına kıyasla çok yavaştır. Ciddi uygulamalar için tamamen uygun değildir ve iyi UX'e engel olur. Bir oyuncak web sitesi olmadığı sürece bundan kaçınmanızı tavsiye ederim.
— John Weisz
2
İnsanlar saf javascript sonra BAM dediğinde nefret ediyorum! bir jquery eklentisi.
— Dinh Tran
Tarayıcı işlevini devre dışı bıraktığı için nicescroll kullanılmasını önermem. Orta tıklamayla kaydırma, nicescroll ile çalışmaz.
— Aloso
Bu niceScroll seviyorum, html yapısını
— kırmaz
11

Özel kaydırma çubukları CSS ile mümkün değildir, biraz JavaScript büyüsüne ihtiyacınız olacaktır.

Bazı tarayıcılar ::-webkit-scrollbarWebkit gibi spesifik olmayan CSS kurallarını destekler, ancak yalnızca Webkit'te çalışacağı için ideal değildir. IE de böyle bir şey vardı, ama artık desteklediklerini sanmıyorum.

— elclanrs
kaynak
2
eski cevap
— T.Todua
1
@ T.Todua Bu yanıtta modası geçmiş nedir?
— kojow7
6

Birçok insan gibi ben de şöyle bir şey arıyordum:

  • Çoğu modern tarayıcıda tutarlı bir tarz ve işlevsel
  • Bazı saçma 3000 satır şişirilmiş jQuery uzatma cr * p değil

... Ama ne yazık ki - hiçbir şey!

Eđer bir iţ yapmaya deđerse ... 30 dakika içinde bir ţeyler çalýţtýrdým. Feragatname: bununla ilgili oldukça az bilinen (ve muhtemelen henüz bilinmeyen bir kaç sorun) var, ancak dünyadaki birçok 2920 JS hattının birçok teklifte neler olduğunu merak etmeme neden oluyor!

var dragParams;
	window.addEventListener('load', init_myscroll);

	/* TODO: Much to do for v axis! */

	function bardrag_mousemove(e) {
	  var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
	  pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
	  dragParams.slider.style.left = pos + 'px';
	  updateScrollPosition(dragParams.slider, pos);
	}

	function updateScrollPosition(slider, offsetVal) {
	  var bar = slider.parentNode;
	  var myscroll = bar.parentNode;
	  var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
	  var maxSlide = bar.offsetWidth - slider.offsetWidth;
	  var viewX = maxView * offsetVal / maxSlide;
	  myscroll.scrollLeft = viewX;
	  bar.style.left = viewX + 'px';
	}

	function drag_start(e) {
	  var slider = e.target;
	  var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
	  dragParams = {
	    clientX: e.clientX,
	    offsetLeft: slider.offsetLeft,
	    slider: e.target,
	    maxLeft: maxLeft
	  };
	  e.preventDefault();
	  document.addEventListener('mousemove', bardrag_mousemove);
	}

	function drag_end(e) {
	  e.stopPropagation();
	  document.removeEventListener('mousemove', bardrag_mousemove);
	}

	function bar_clicked(e) {
	  var bar = e.target;
	  var slider = bar.getElementsByClassName('slider')[0];
	  if (bar.className == 'h bar') {
	    var maxSlide = bar.offsetWidth - slider.offsetWidth;
	    var sliderX = e.offsetX - (slider.offsetWidth / 2);
	    sliderX = Math.max(0, Math.min(sliderX, maxSlide));
	    slider.style.left = sliderX + 'px';
	    updateScrollPosition(slider, sliderX);
	  }
	}

	function init_myscroll() {
	  var myscrolls = document.getElementsByClassName('container');
	  for (var i = 0; i < myscrolls.length; i++) {
	    var myscroll = myscrolls[i];
	    var style = window.getComputedStyle(myscroll);
	    if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
	      addScroller(false, myscroll);
	    }
	    if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
	      addScroller(true, myscroll);
	    }
	  }
	}

	function addScroller(isX, myscroll) {
	  myscroll.className += ' myscroll';
	  var bar = document.createElement('div');
	  var slider = document.createElement('div');
	  var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
	  var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
	  var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
	  slider.style.width = 100 * sliderPx / offsetDim + '%';
	  slider.className = 'slider';
	  bar.className = isX ? 'h bar' : 'v bar';
	  bar.appendChild(slider);
	  myscroll.appendChild(bar);

	  bar.addEventListener('click', bar_clicked);
	  slider.addEventListener('mousedown', drag_start);
	  slider.addEventListener('mouseup', drag_end);
	  bar.addEventListener('mouseup', drag_end);
	  document.addEventListener('mouseup', drag_end);
	}
body {
  background-color: #66f;
}
.container {
  background-color: #fff;
  width: 50%;
  margin: auto;
  overflow: auto;
}
.container > div:first-of-type {
  width: 300%;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */

.myscroll {
  overflow: hidden;
  position: relative;
}
.myscroll .bar {
  background-color: lightgrey;
  position: absolute;
}
.myscroll {
  padding-bottom: 20px;
}
.myscroll .h {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.myscroll .slider {
  background-color: grey;
  position: absolute;
}
.myscroll .h .slider {
  height: 100%;
}
<div class="container">
  <div></div>
</div>
Snippet'i genişlet

— ne1410s
kaynak
1
arka plan: doğrusal gradyan (sağa, kırmızı, sarı);
— xgqfrms
5

Pek çok eklenti denedim, çoğu tüm tarayıcıları desteklemiyor, iScroll'u tercih ediyorum ve nanoScroller tüm bu tarayıcılar için çalışıyor:

  • IE11 -> IE6
  • IE10 - WP8
  • IE9 - WP7
  • IE Xbox One
  • IE Xbox 360
  • Google Chrome
  • FireFox
  • Opera
  • Safari

Ancak iScroll dokunmayla çalışmıyor!

demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

— Ouadie
kaynak
nano kaydırma çubuğu yatay kaydırmayı desteklemiyor.
— FlavorScape
Repo arşivlendi github.com/cubiq/iscroll Diğer alternatifleri
— aramanızı
5

Lütfen bu bağlantıyı kontrol edin. Çalışan demo ile örnek

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

CSS Kaydırma Çubukları

2
Demo için teşekkür ederim. İlk olarak Firefox 58.0.2 (64 bit, Windows 7 Pro / 64) ile çalıştırdım ve tüm kaydırma çubukları aynıydı. Ardından Chrome Sürüm 65.0.3325.162 (Resmi Derleme) (64 bit) ile çalıştı ve hepsi farklıydı. Yani (belki istemeden) -webkit-yaklaşımın sınırlamalarını gösterdiniz .
— KOD-READ
4

Firefox yeni sürüm (64) CSS Scrollbars Modül Seviye 1'i destekliyor 

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>
Snippet'i genişlet

Kaynak: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Firefox kaydırma çubuğu

https://codepen.io/fatihhayri/pen/pqdrbd

— Fatih Hayrioğlu
kaynak
3

Chrome ve Safari için çalışan bir web seti örneği:

CSS:

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

Çıktı:

resim açıklamasını buraya girin

— Denys Gemileri
kaynak
3 
.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

Bana güzel bir mobil / osx verdi.

— csomakk
kaynak
1
Daha özlü bir yanıt. IMHO aslında OP'nin sadece bir div'ı nasıl şekillendireceği sorusunu yanıtladı. Güzel.
— Danimal Reks
2

HTML belgelerinizdeki özel div öğelerine özel kaydırma çubukları uygulamanın bir yolu vardır. İşte size yardımcı olan bir örnek. https://codepen.io/adeelibr/pen/dKqZNb Ama bir özeti olarak. Böyle bir şey yapabilirsiniz.

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

CSS dosyası şuna benzer.

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}
— Adeel Imran
kaynak
2

Google'ın bazı uygulamalarında uzun süredir kullandığı budur. Kodda, sonraki sınıfları uygularsanız, bir şekilde Chrome'da kaydırma çubuğunu gizlediklerini, ancak yine de çalıştığını görün.

Sınıfları jfk-scrollbar, jfk-scrollbar-borderlessvejfk-scrollbar-dark

.testg{ border:1px solid black;  max-height:150px;  overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}

/* The google css code for scrollbars */
::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
    background: transparent
}
body::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
.jfk-scrollbar::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
.jfk-scrollbar::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
.jfk-scrollbar::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar::-webkit-scrollbar-corner {
    background: transparent
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body.jfk-scrollbar::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
<div class="testg">
    <div class="content">
        Look Ma'  my scrollbars doesn't have arrows <br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
    <div class="content">
        Look Ma'  my scrollbars dissapear in chrome<br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
Snippet'i genişlet

http://jsfiddle.net/76kcuem0/32/

Kaydırma çubuklarından okları kaldırmayı yararlı buldum. 2015 itibariyle, malzeme tasarımı kullanıcı arayüzünde sonuçlar listesinde yer ararken Google Haritalar'da kullanılmıştır.

— le0diaz
kaynak
1

Webkit kaydırma çubuğu çoğu tarayıcıda desteklenmez.

CHROME üzerinde destekler

İşte webkit scrollbar için bir demo Webkit Scrollbar DEMO

Eğer daha fazla örnek arıyorsanız bu kontrol Fazla Örnekler

Başka bir yöntem Jquery Scroll Bar Eklentisi

Tüm tarayıcılarda desteklenir ve uygulaması kolaydır

Eklentiyi Buradan İndirin

Nasıl kullanılır ve daha fazla seçenek için BUNU KONTROL EDİN

DEMO

— Nikz
kaynak
1

JS ve CSS scroll çok çalıştı ve bu kullanımı çok kolay ve IE ve Safari ve FF üzerinde test ve iyi çalıştı bulundu

AS @thebluefox'un önerdiği

İşte böyle

Aşağıdaki betiği 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

Ve bu, burada kaydırmanız gereken paragrafta

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

Daha fazla ayrıntı için eklenti sayfasını ziyaret edin

FaceScroll Özel kaydırma çubuğu

Umarım yardımcı olur

— Yousef Altaf
kaynak
0

Hala iyi bir çözüm arayan insanlar için sadece bu eklenti simplebar'ı buluyorum

Özel kaydırma çubukları yerel kaydırma ile vanilya javascript kütüphanesi, basit, hafif, kullanımı kolay ve çapraz tarayıcı yapılır.

Benim durumumda, reatJS çözümleri arıyordum, yazar ayrıca reaksiyon, açısal, vue ve sonraki örnekler için sarmalayıcılar sağlıyor

— ManBearPig
kaynak
0

Webkit tarayıcıları (Chrome, Safari ve Opera gibi) , tarayıcının kaydırma çubuğunun görünümünü değiştirmemizi sağlayan standart olmayan :: - webkit-scrollbar sözde öğesini destekler .

Not: :: - webkit-kaydırma çubuğu Firefox veya IE ve Kenardan tarafından desteklenmemektedir.

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

div {
  width: 15rem;
  height: 8rem;
  padding: .5rem;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  overflow: auto;
}

.box::-webkit-scrollbar {
  width: .8em;
}

.box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
 
.box::-webkit-scrollbar-thumb {
  background-color: dodgerblue;
}
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
Snippet'i genişlet

Referans: Özel Kaydırma Çubuğu Nasıl Oluşturulur

— Vishal
kaynak
0

Varsayalım div var 

<div class="custom_scroll"> ... </div>

CSS Stillerini şu şekilde uygula 

//custom scroll style definitions
.custom_scroll
{
  overflow-y: scroll;
}

//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar
{
    width: 5px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    opacity: 0.5;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    //background-color: #555;
}

Sonuç Kaydı şu şekilde görünecektir:

resim açıklamasını buraya girin

— Saumyajit
kaynak
-1

Veya bunun gibi bir şey kullanın:

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};

Ve başlatın:

<body onload="new MiniScroll(this);"></body>

Ve özelleştirin:

.scroll-place { // ... // }
.scroll { // ... // }
— Максим Владимирович
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.