Jump to content
Sign in to follow this  
kuci

Wystylizowanie suwaka w Bootstrap overflow-y scroll

Recommended Posts

Witajcie, tworze coś takiego jak:

image

proszę zerknąć na prawo na ten suwak, nie mam go i nie wiem jak go włączyć + wystylizować. 

 

U mnie wygląda to tak:
image

 

oczywiście skorzystałem z overflow-y: scroll; 

.item_list {
    margin-top: 10px;
    background: #000000;
    width:100%;
    border-radius: 3px;
    overflow-y: scroll;
    padding:10px;
    height: 100px;
}

nie wiem czy boostrap coś kitra czy co tu się odwala. Jak ktoś ma ciekawe propozycje słucham i nagradzam 

Share this post


Link to post

A jak ustawisz overflow: auto to co sie stanie?

Tak wyczytalem na necie, ze to pomoglo.

Bootstrap uzywa !important w niektorych miejscach, mozesz ty tez uzyc tej opcji dopisując.

overflow-y: scroll!important; 

Chyba , ze uzywales i nie dziala to wsadz to w diva

  • Like 1

Share this post


Link to post

najlepiej to uzyj perfect-scrollbar chyba ze nie zalezy ci na wspieraniu starych wersji przegladarek

  • Like 1

Share this post


Link to post
12 godzin temu, Dominik. napisał:

A jak ustawisz overflow: auto to co sie stanie?

Tak wyczytalem na necie, ze to pomoglo.

Bootstrap uzywa !important w niektorych miejscach, mozesz ty tez uzyc tej opcji dopisując.


overflow-y: scroll!important; 

Chyba , ze uzywales i nie dziala to wsadz to w diva

 

11 godzin temu, TrzyRazyZero napisał:

najlepiej to uzyj perfect-scrollbar chyba ze nie zalezy ci na wspieraniu starych wersji przegladarek

 

Dzięki za rady Panowie. @Dominik. sprawdzałem , @TrzyRazyZero chciałbym to zostawić bez JS/jquery.

 

Zrobiłem to tak dodałem klasę do diva z overflow: "scrollbar" a do niego w css:

.scrollbar::-webkit-scrollbar-track
{
    background-color: #000;
}

.scrollbar::-webkit-scrollbar
{
    width: 7px;
    background-color: transparent;
}

.scrollbar::-webkit-scrollbar-thumb
{
      background-color: #1cb591;
}

i tym sposobem otrzymałem dosyć zadowalający efekt:

5898431e00864_Beztytuu.thumb.png.29a30eb05d83a9f9ae4931f557c9f841.png

 

lecz tak jest tylko na Google Chrome a muszę to jakoś dziabnąć na Mozilla Firefox.. bo tu wygląda to tak:

589843c570861_Beztytuu.thumb.png.c88509db815c8b86590ab9dadb3ade56.png

jakbym o stylizował jakoś na mozilli to byłyby święty spokój..

może znacie sposób na firefoxa ☺️ 

Share this post


Link to post

czemu bez js?

ie, edge, opera mini, firefox i poprzednie wersje nie wspieraja wystylowania scrollbarow

 

@edit

ie jedynie wspiera kolorowanie scrollbarow bez stylu

Edited by TrzyRazyZero
  • Like 1

Share this post


Link to post

No i oczywiście nie zapominajmy o Safari ☺️ Macowskie przeglądarki chyba również mają jakiś problem z obsługą CSSowych scrollbarów i trzeba robić to po przez JSa. 

Share this post


Link to post

zrobiłem tak jak mówił @TrzyRazyZero wykorzystałem + edytowałem tylko męczy mnie jedna opcja że dopiero po najechaniu pokazuje się pasek scrollu i nie moge znaleźć .. która opcja za to odpowiada ( na dole są parametry )

link:

https://github.com/noraesae/perfect-scrollbar

Edited by kuci

Share this post


Link to post
49 minut temu, rogue napisał:

No i oczywiście nie zapominajmy o Safari ☺️ Macowskie przeglądarki chyba również mają jakiś problem z obsługą CSSowych scrollbarów i trzeba robić to po przez JSa. 

nie

1 minutę temu, kuci napisał:

zrobiłem tak jak mówił @TrzyRazyZero wykorzystałem + edytowałem tylko męczy mnie jedna opcja że dopiero po najechaniu pokazuje się pasek scrollu i nie moge znaleźć .. która opcja za to odpowiada

link:

https://github.com/noraesae/perfect-scrollbar

https://github.com/noraesae/perfect-scrollbar/wiki/FAQ

  • Like 1

Share this post


Link to post
13 minut temu, TrzyRazyZero napisał:

No tak do FAQa nie doszedłem - dzięki

 

jeszcze jedna rzecz wylapałem: Gdy klikam/ łapie za scrollbar to zmienia mi kolor i rozszerza go o kilka pixeli i teraz to już raczej jest  w js bo ewidentnie po kliknięciu się to dzieje.

screeny:

przed kliknięciem/złapaniem:

5898939ec2165_Beztytuu.png.914028c519a86daf0a4ea6babeaabe29.png

po klinknięciu złapaniu:

589893acf3a23_Beztytuu1.png.6beabbac3c32477d13e2b7a0beef384c.png

Share this post


Link to post
4 minuty temu, kuci napisał:

No tak do FAQa nie doszedłem - dzięki

 

jeszcze jedna rzecz wylapałem: Gdy klikam/ łapie za scrollbar to zmienia mi kolor i rozszerza go o kilka pixeli i teraz to już raczej jest  w js bo ewidentnie po kliknięciu się to dzieje.

screeny:

przed kliknięciem/złapaniem:

po klinknięciu złapaniu:

to sie dzieje w css

  • Like 1

Share this post


Link to post

tak znalazłem.

 

podsumowując perfect-scrollbar dobra opcja dla wszystkich przeglądarek.

 

rozwiązane dzięki za pomoc

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  
×
×
  • Create New...