Projektowanie tylko śladu paska przewijania - javascript, jquery, html, css

Chcę zaprojektować tylko pasek przewijania i chcę pozostać domyślnymi przyciskami. Chcę stworzyć coś, co zrobił Microsoft Outlook.

Próbowałem następujący kod css:

.hb-chat-scroolbar::-webkit-scrollbar-thumb
{
border-radius: 10px;
width: 5px;
background-color: #f5f5f5;
}

.hb-chat-scroolbar::-webkit-scrollbar-track
{
border-radius: 10px;
width: 5px;
background-color: #f5f5f5;
}

Ale projekt nie działa, jeśli webkit-scrollbar nie jest zadeklarowany:

.hb-chat-scroolbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}

Jeśli jednak dodaję kod paska przewijania, strzałka zniknie.

Masz jakąś sztuczkę?

Odpowiedzi:

Może to stylować strzałki, ale jednocześnie oba style, więc możesz dodać ikonę za pomocą strzałek w górę iw dół oraz umieścić ją.

  ::-webkit-scrollbar-button {
background: #666;
background: url(img/arrows_updown.gif); /* u get the idea */
height: 15px;
border-radius: 50%;
}

Być może potrzebujesz komponentu Javascript do tego.