Dostosowany pasek przewijania CSS w div

327

Jak dostosować pasek przewijania za pomocą CSS (Cascading Style Sheets) dla jednej strony, diva nie całej strony?

css  html  scrollbar 
— harisdev
źródło
Zastosuj overflow:auto;tylko do tego <div>. Więcej szczegółów w tle?
— Rob W
Zrobiłem to, ale potrzebuję niestandardowego paska przewijania, uhm .. projekt paska przewijania
— harisdev
Kolor niestandardowy? Jest to obsługiwane tylko w IE, a nie w innych nowoczesnych przeglądarkach. Nie można tego osiągnąć za pomocą czystego CSS.
— Rob W
1
Najprostsze rozwiązanie JS (CSS nie obsługuje wielu przeglądarek) - yaireo.github.io/fakescroll
— vsync
— Buzinas,

Odpowiedzi:

688

Pomyślałem, że pomocne byłoby skonsolidowanie najnowszych informacji na temat pasków przewijania, CSS i kompatybilności przeglądarki.

Obsługa paska przewijania CSS

Obecnie nie ma definicji stylów CSS paska przewijania przeglądarki. Artykuł W3C, o którym wspomniałem na końcu, ma następujące oświadczenie i został niedawno zaktualizowany (10 października 2014 r.):

Niektóre przeglądarki (IE, Konqueror) obsługują niestandardowe właściwości „scrollbar-shadow-color”, „scrollbar-track-color” i inne. Te właściwości są nielegalne: nie są zdefiniowane w żadnej specyfikacji CSS ani nie są oznaczone jako zastrzeżone (poprzedzając je znakiem „-vendor-”)

Microsoft

Jak wspomnieli inni, Microsoft obsługuje styl paska przewijania, ale tylko w IE8 i nowszych.

Przykład:

<!-- 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 i Safari (WebKit)

Podobnie WebKit ma teraz własną wersję:

Firefox (Gecko)

Począwszy od wersji 64 Firefox obsługuje styl paska przewijania poprzez właściwości scrollbar-color(częściowo, szkic W3C ) i scrollbar-width( szkic W3C ). Kilka dobrych informacji na temat implementacji można znaleźć w tej odpowiedzi .

Styl paska przewijania w różnych przeglądarkach

Biblioteki JavaScript i wtyczki mogą stanowić rozwiązanie dla różnych przeglądarek. Istnieje wiele opcji.

Możnaby wymieniać dalej ... Najlepszym rozwiązaniem jest poszukiwanie, badanie i testowanie dostępnych rozwiązań. Jestem pewien, że będziesz w stanie znaleźć coś, co będzie pasować do twoich potrzeb.

Zapobiegaj nielegalnemu stylowi paska przewijania

W przypadku, gdy chcesz zapobiec stylowaniu paska przewijania, który nie został poprawnie poprzedzony „-vendor”, ten artykuł w W3C zawiera kilka podstawowych instrukcji . Zasadniczo musisz dodać następujący CSS do arkusza stylów użytkownika powiązanego z Twoją przeglądarką. Te definicje zastąpią nieprawidłowe style paska przewijania na każdej odwiedzanej stronie.

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;
}

Zduplikowane lub podobne pytania / źródło niepowiązane powyżej

Uwaga: ta odpowiedź zawiera informacje z różnych źródeł. Jeśli użyto źródła, jest ono również powiązane z tą odpowiedzią.

— JSuar
źródło
227
Sieć istnieje już od ponad dwóch dekad i wciąż nie ma standardowego sposobu stylizowania pasków przewijania. Dwadzieścia lat komitetów normalizacyjnych nie zauważa, że ​​ludzie przewijają rzeczy. Nie ma tempa powolnego, sarkastycznego klaskania, które odpowiednio wyrażałyby moje odczucia. Ale myślę, że 20-letnie opóźnienie między pierwszym a drugim klaśnięciem byłoby odpowiednie. W pewnym sensie jeszcze się nie urodziłem, kiedy pojawił się WWW, a teraz jestem inżynierem komputerowym. Dobra droga, W3C.
— Parthian Shot
3
Wystarczy dodać dwa centy: Gmail i Youtube mają stylizowany pasek przewijania w Chrome, a natywny w Explorerze i Firefoksie. Jeśli te standardy są dla nich wystarczająco dobre, to też są wystarczające dla mnie
— yonatanmn
9
@ PaulD.Waite Być może, ale można to zastosować do wszystkiego. A CSS istnieje jako język, dzięki czemu projektanci mogą zastąpić ustawienia domyślne. Cały pomysł polega na tym, że zły projektant interfejsu użytkownika może sprawić, że każdy element stanie się nieintuicyjny, ale kiedy tylko założycie, że projektant witryny jest niekompetentny, po co w ogóle pozwalać na dostosowywanie stron?
— Parthian Shot
6
@ PaulD.Waite Oczywiście nie jest to jedna z tych rzeczy. Częściowo dlatego, że znajduje się w obszarze ekranu, który i tak powinien całkowicie kontrolować projektant witryny, więc nie stanowi zagrożenia dla bezpieczeństwa, a częściowo dlatego, że - w praktyce - nie stanowi problemu. Wiele witryn wdraża własne hacki, aby wyglądały i zachowywały się jak paski przewijania i działają dobrze. Nie tylko działają dobrze i wyglądają lepiej, ale ludzie faktycznie rozumieją, jak z nich korzystać, o to właśnie chodzi. Niestety, ponieważ są hackami, czasami nie bawią się dobrze z funkcjami drukowania.
— Parthian Shot
5
Ta odpowiedź nie wyczerpuje całkowicie jego pytania, a mianowicie zastosowania stylów paska przewijania do konkretnego elementu div , a nie do całej strony.
— Stewart
14

Spróbuj

Źródło: https://nicescroll.areaaperta.com/

Prosta implementacja 

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

Jest to pasek przewijania wtyczki jQuery, więc można przewijać paski przewijania i wyglądać tak samo w różnych systemach operacyjnych.

— Dilusha Gonagala
źródło
Jestem pewien, że można go dostosować, ale wersja demo na stronie przewija się o wiele za wolno, a pasek przewijania jest zbyt trudny do uchwycenia.
— Goose,
4
Podobnie jak praktycznie wszystkie wtyczki jQuery - [dreszcze] - jest to strasznie powolne w porównaniu z natywnymi, wątkowymi implementacjami przewijania przyspieszanymi przez GPU. Zupełnie nie nadaje się do poważnych zastosowań i stanowi przeszkodę dla dobrego UX. Radzę ci tego unikać, chyba że jest to witryna z zabawkami.
— John Weisz
2
Nienawidzę, kiedy ludzie nazywają coś czystego javascript, a potem BAM! wtyczka jquery.
— Dinh Tran,
Nie polecałbym używania nicescroll, ponieważ wyłącza on funkcje przeglądarki. Przewijanie środkowym kliknięciem nie działa z nicescroll.
— Aloso,
uwielbiam ten niceScroll, nie dodaje otoki div wokół elementu, co oznacza, że ​​nie psuje struktury HTML
— datdinhquoc
11

Niestandardowe paski przewijania nie są możliwe w CSS, potrzebujesz trochę magii JavaScript.

Niektóre przeglądarki obsługują nieokreślone reguły CSS, takie jak ::-webkit-scrollbarWebkit, ale nie są idealne, ponieważ będą działać tylko w Webkit. IE też miało coś takiego, ale nie sądzę, żeby to już wspierały.

— elclanrs
źródło
2
nieaktualna odpowiedź
— T.Todua,
1
@ T.Todua Co jest nieaktualne w tej odpowiedzi?
— kojow7
6

Jak wiele osób, szukałem czegoś, co:

  • Konsekwentnie stylizowany i funkcjonalny w większości nowoczesnych przeglądarek
  • Nie jakieś niedorzeczne rozszerzenie jQuery o długości 3000 linii cr * p

... Ale niestety - nic!

Cóż, jeśli praca jest warta wykonania ... Udało mi się coś uruchomić w około 30 minut. Oświadczenie: istnieje wiele znanych (i prawdopodobnie kilka jeszcze nieznanych) problemów z tym związanych, ale zastanawiam się, po co te inne 2920 linii JS są dostępne w wielu ofertach!

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>
Rozwiń fragment kodu

— ne1410s
źródło
1
tło: gradient liniowy (z prawej, czerwony, żółty);
— xgqfrms
5

Wypróbowałem wiele wtyczek, większość z nich nie obsługuje wszystkich przeglądarek, wolę iScroll i nanoScroller działa dla wszystkich tych przeglądarek:

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

Ale iScroll nie działa z dotykiem!

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

— Ouadie
źródło
nano scroller nie obsługuje przewijania w poziomie.
— FlavorScape
Repo jest zarchiwizowane github.com/cubiq/iscroll Proponuję poszukać innych alternatyw
— Ouadie
5

Sprawdź ten link. Przykład z działającą wersją demonstracyjną

   #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;
}

Paski przewijania CSS

2
Dziękuję za demo. Najpierw uruchomiłem go z przeglądarką Firefox 58.0.2 (64-bit, Windows 7 Pro / 64) i wszystkie paski przewijania były identyczne. Następnie działał z wersją Chrome 65.0.3325.162 (oficjalna wersja) (64-bitowa) i wszystkie były różne. Więc (być może nieumyślnie) wykazałeś ograniczenia tego -webkit-podejścia.
— CODE-REaD
4

Nowa wersja przeglądarki Firefox (64) obsługuje moduły przewijania CSS Poziom 1 

.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>
Rozwiń fragment kodu

Źródło: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Pasek przewijania Firefox

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

— Fatih Hayrioğlu
źródło
3

Oto przykład zestawu internetowego, który działa w Chrome i Safari:

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;
}

Wynik:

wprowadź opis zdjęcia tutaj

— Denys Wessels
źródło
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;
}

dał mi niezły telefon / osx jak ten.

— csomakk
źródło
1
Bardziej zwięzła odpowiedź. IMHO faktycznie odpowiedział na pytanie OP, które polegało na tym, jak stylizować tylko jednego diva. Miły.
— Danimal Reks,
2

Istnieje sposób, w jaki można zastosować niestandardowe paski przewijania do niestandardowych elementów div w dokumentach HTML. Oto przykład, który pomaga. https://codepen.io/adeelibr/pen/dKqZNb Ale w skrócie. Możesz zrobić coś takiego.

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

Plik CSS wygląda następująco.

.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
źródło
2

Tego od dawna używa Google w niektórych swoich aplikacjach. Zobacz w kodzie, że jeśli zastosujesz kolejne klasy, w jakiś sposób ukryją pasek przewijania w Chrome, ale nadal działa.

Klasy są jfk-scrollbar, jfk-scrollbar-borderlessijfk-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>
Rozwiń fragment kodu

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

Po prostu uznałem za przydatne usunięcie strzałek z pasków przewijania. Od 2015 roku jest używany w Mapach Google podczas wyszukiwania miejsc na liście wyników w interfejsie projektowania materiałów.

— le0diaz
źródło
1

Próbowałem wiele zwojów JS i CSS i okazało się, że jest to bardzo łatwy w użyciu i przetestowany na IE, Safari i FF i działał dobrze

AS @thebluefox sugeruje

Oto jak to działa

Dodaj poniższy skrypt do 

<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>

I to tutaj, w akapicie, w którym musisz przewijać

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

Aby uzyskać więcej informacji, odwiedź stronę wtyczki

FaceScroll Niestandardowy pasek przewijania

mam nadzieję, że to pomoże

— Yousef Altaf
źródło
0

Dla osób, które wciąż szukają dobrego rozwiązania, po prostu znajduję ten prosty plugin

Niestandardowe pasy javascript w waniliowej bibliotece przewijania z natywnym przewijaniem, wykonane proste, lekkie, łatwe w użyciu i w różnych przeglądarkach.

W moim przypadku szukałem rozwiązań reagJS, autor zapewnia również opakowania dla reagujących, kątowych, vue i następnych przykładów

— Człowiek, niedźwiedź, świnia
źródło
0

Przeglądarki Webkit (takie jak Chrome, Safari i Opera) obsługują niestandardowy pseudoelement :: - webkit-scrollbar , który pozwala nam modyfikować wygląd paska przewijania przeglądarki.

Uwaga: :: - WebKit-pasek przewijania nie jest obsługiwane przez IE i Firefox lub Edge.

* {
  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>
Rozwiń fragment kodu

Odniesienia: Jak utworzyć niestandardowy pasek przewijania

— Vishal
źródło
0

Załóżmy, że masz div jako 

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

Zastosuj style CSS jako 

//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;
}

Wynikowy zwój pojawi się jako

wprowadź opis zdjęcia tutaj

— Saumyajit
źródło
-1

Lub użyj czegoś takiego:

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}};

I zainicjuj:

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

I dostosuj:

.scroll-place { // ... // }
.scroll { // ... // }
— Максим Владимирович
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.