Problem ze scrollem

pytanie zadane 7 stycznia 2017 w HTML i CSS przez PatrykoPlayGames Nowicjusz (120 p.)

Witam mam problem z dodaniem scrolla do divu. Na początku chciałbym zaznaczyć, że jestem początkowym "programistą" i znam podstawy tych o to języków.

Chciałbym, aby to wyglądało tak:

Moje wygląda tak (Nie bawiłem się na razie w kolory tylko w wygląd ogólny) :

Mój kod HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
  <meta charset="utf-8"/>
  <title>BetujzNami</title>
  <meta name="description" content="Chcesz wygrywać skiny lub pieniądze obstawiając mecze w CS:GO? To dobrze trafiłeś! Na tej stronie Znajdziesz wszystko na ten temat!" />
  <meta name="keywords" content="obstawianie meczy, e-sport, CS:GO, Skiny, zarobek, betting" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  
  <link rel="stylesheet" href="style.css" type="text/css" />
  <link href='http://fonts.googleapis.com/css?family=Alegreya&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="http://skinschanger.com/assets/css/tinyscrollbar.css" type="text/css" media="screen"/>
  
  
</head>

<body>

	<div id="container">
		<div id="top_left">
			<a href="index.html">cs<strong class="zielony">trades</strong></a>
		</div>
			<div id="top">
				ADD CS<strong class="zielony">trades</strong>.<strong class="zielony">eu</strong> TO YOUR NICKNAME ON STEAM !
					<br/>AND TAKE BONUS 2%
			</div>
				<div id="top_right">
					<a id="top_right" href="http://skinschanger.com/index.php/steam/login"><img src="http://skinschanger.com/assets/img/login_steam.png" style="margin-top:-8px;"></a>
				</div>
					<div id="clear_both"> </div>
						<div class="obramowka">
							<div class="text_left">
								<b>Your Offer</b>
							</div>
								<div class="text_right">
									$0.00
								</div>
									<div id="clear_both"> </div>
										<div id="scroll">
											
										</div>
							</div>
			
	  </div>



</body>

</html>

I kod CSS:

body
{
	margin: 0;
	background-image: url("img/tlo.png"); /* Background pattern from subtlepatterns.com */ 
}

#container
{
	width: 100%;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
}

#top_left
{
	float: left;
	width: 156px;
	height: 27px;
	margin-top: 30px;
	margin-left: 15px;
	text-align: center;
	color: #9d9d9d;
    font-size: 22px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
}
#top
{
	width: 600px;
	float: left;
	height: 27px;
	margin-top: 30px;
	padding-left: 70px;
	font-size: 22px;
	color: #9d9d9d;
	text-align: center;
	text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
}

#top_right
{
	float: left;
	width: 210px;
	height: 43px;
	margin-top: 18px;
	padding-left: 40px;
	margin-right: 15px;
}

#clear_both
{
	clear: both;
}

.obramowka
{
	width: 400px;
	height: 246px;
	background-color: #545454;
	margin-left: 60px;
	margin-top: 70px; 
}

.text_left
{
	float: left;
	padding-top: 6px;
	padding-left: 15px;
	font-size: 22px;
	text-align: left;
	color: white;
	font-family: Alegreya;
}

.text_right
{
	float: right;
	padding-top: 6px;
	padding-right: 15px;
	font-size: 25px;
	color: white;
	
}

.myscrollbar
{
	text-align: center;
	color: white;
}

.zielony
{
	color: #7cc316;
    font-size: 22px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
}

a
{
	text-decoration: none;
	color: #9d9d9d;
}

1 odpowiedź

odpowiedź 7 stycznia 2017 przez Ivan Maniak (60,650 p.)

Niestety nie ma tak łatwo ze zmianą scrolla. Możesz...

... użyć ::-webkit-scrollbar w CSS-ie. Najłatwiejsza droga aby zmodyfikować scrollbar-a, ale niestety nie działa na wszystkich przeglądarkach. Działa na przeglądarkach z webkit. Dla innych z poziomu CSS-a nie ma możliwości zmiany wyglądu scrollbar-a. (I pewnie szybko się nie pojawi :/) Plusem jest to, że nawet gdy nie będzie super wyglądającego scroll-a to będzie scroll, który zawsze będzie działał.
... użyć jakiegoś frameworka JS-a, który zapewni elementowi fake scrollbar-a, czyli po prostu będzie to div, który będzie odpowiednio działał na różne eventy. W internecie jest tego bardzo, bardzo dużo. Google: js scrollbar. Niestety jeżeli nie będzie js-a/nie wczyta się skrypt, to nie będzie scrollbar-a. Warto wówczas w CSS-ie zapewnić wersję bez scrollowania, a wszystkie ograniczenia typu overflow dodać z poziomu JS-a. Dodajesz "parę" bitów do zapytania, ale za to masz "ładny" scroll, który powinien działać na większej ilości przeglądarkach.

komentarz 7 stycznia 2017 przez PatrykoPlayGames Nowicjusz (120 p.)

A powiesz mi chociaż jak wstawić taki scrollbar jak na obrazku wyżej ? (ogólnie jak wstawić tam srollbar)

komentarz 7 stycznia 2017 przez pablop76 VIP (123,180 p.)

Witam. Dodajesz tekst do diva scroll. Nadajesz mu wysokość np: 200px; i dodajesz overflow-y: scroll; lub auto w zależności czy chcesz by scroll był zawsze czy tylko przy przepełnieniu diva. A taki cenki i kolorowy scroll to za pomocą jquery. Pluginy mają w nazwie między innymi slimscroll.