Przewijanie zawartości w divach.

Question

Cześć, wyboraźcie sobie, że macie pewną zawartość z tekstem i zdjęciami. Umieszczamy go w bloku ale chcemy miał powiedzmy 200x1000px i żeby można było w nim przewijać ta zawartość ale z ładną rolką a nie z taką którą proponuje przeglądarka. Czy jest na to  sposób? :)

Answer 1

We wszystkich przeglądarkach to skryptem: http://jscrollpane.kelvinluck.com/

Dla Blinka/Webkita można samym CSS-em: https://css-tricks.com/custom-scrollbars-in-webkit/

Comments

Wybrałem opcję nr 2. Wiesz może jak usunąć horyzontalny scroll-bar? Bo skoro zawartość nie wyjeżdża poza podaną szerokość to według mnie sam powinien znikać a jednak tak się nie dzieje.

---

overflow-x: hidden?

---

Tylko gdzie to wkleić?

---

Do elementu, który się przewija w poziomie ;)

---

Dodałem gdzie mogłem i niestety ;D
 

::-webkit-scrollbar {
    width: 12px;
	overflow-x: hidden;
}
 
::-webkit-scrollbar:horizontal {
    width: 0px;
    overflow-x: hidden;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
    overflow-x: hidden;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    overflow-x: hidden;
}

html, body
{
	height: 100%;
    margin: 0px;
    padding: 0px;
    background-image: url("1.png");
    overflow-x: hidden;
}

 

---

::-webkit-scrollbar {
    width: 12px;
    height: 0px;
}

I działa bez overflow-x: hidden; :D 

---

Jak mógłbym wyłączyć wyświetlanie ogólnego paska przewijania strony a pozostawić go włączonego jedynie w wybranym przeze mnie divie?

---

Dla html, body nadać overflow: hidden a temu divowi nadać overflow: auto

---

No i działa :)