[Løst] Fjerne scrollbar fra div

erolha · 27. september 2015

Jeg har én, veldig lang (vertikal) tabell. Den er delt i to, hvor den øverste delen av tabellen er statisk på siden, mens den nederste delen autoscroller. Dette er gjort ved at tabellen(e) er pakket inn i hver sin div.

Dette fungerer utmerket, rent bortsett fra at scrollbaren som dukker opp i den nederste tabellen gjør at cellene ikke har samme bredde som i den øverste.

Med css

.nedersteDivTilTabell {
overflow: hidden;
}

forsvinner scrollbaren fra den nederste tabellen og cellene blir like brede som i den øverste, men jeg mister dessverre muligheten til å scrolle manuelt.

Spørsmålet mitt er: Hvordan fjerner jeg scrollbaren, uten å fjerne muligheten til å scrolle manuelt?

Jeg beklager hvis jeg oppfattes som en forumspammer, det er virkelig ikke meningen!

Hvis noen lurer på hva jeg egentlig driver med så er det å lage et leaderboard, hvor topp 3 står statisk på toppen av siden, mens resten av resultatlisten langsomt ruller over skjermen...

Igjen; på forhånd takk for alle svar!

kjekset · 27. september 2015

Kan du legge ved de aktuelle HTML og CSS-kodene?

erolha · 28. september 2015

Kan du legge ved de aktuelle HTML og CSS-kodene?

Beklager, men jeg sovnet visst akutt på sofaen...

Her er en url til en test: http://test.fanteri.no/ledelse.php

HTML:

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<title>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<link href="includes/style.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-12" id="rullings">
					<h1>LEADERBOARD</h1>
					<div class="table-responsive"> 						
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>Kol1</th><th>Kol2</th><th>Kol3</th><th>Kol4</th><th>Kol5</th><th>Kol6</th><th>Kol7</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td class="tdpos col-md-1">1</td><td class="tdnavn col-md-5">John Fravolda</td><td class="tdnoe col-md-2">3</td><td class="tdspilt col-md-1">A</td><td class="tdmer col-md-1">B</td><td class="tdmest col-md-1">C</td><td class="tdtotal col-md-1">D</td>
								</tr>
								<tr>
									<td class="tdpos col-md-1">2</td><td class="tdnavn col-md-5">Olivia Utenjohn</td><td class="tdnoe col-md-2">4</td><td class="tdspilt col-md-1">B</td><td class="tdmer col-md-1">C</td><td class="tdmest col-md-1">C</td><td class="tdtotal col-md-1">E</td>
								</tr>
								<tr>
									<td class="tdpos col-md-1">3</td><td class="tdnavn col-md-5">Knut Knutsen</td><td class="tdnoe col-md-2">6</td><td class="tdspilt col-md-1">C</td><td class="tdmer col-md-1">D</td><td class="tdmest col-md-1">E</td><td class="tdtotal col-md-1">F</td>
								</tr>
							</tbody>
						</table>
					</div>  
					<div class="table-responsive mCustomScrollbar" id="rulletopp" data-mcs-theme="dark">       
						<table class="table table-bordered">
							<tbody>
								<tr>
									<td class="tdpos col-md-1">4</td><td class="tdnavn col-md-5">Espen Lind</td><td class="tdnoe col-md-2">9</td><td class="tdspilt col-md-1">D</td><td class="tdmer col-md-1">E</td><td class="tdmest col-md-1">F</td><td class="tdtotal col-md-1">G</td>
								</tr>
								<!--Og så videre-->
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="includes/js/bootstrap.min.js"></script>
		<script src="includes/rullerende.js"></script>
  </body>
</html>

CSS:

@import url('css/bootstrap.min.css');

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}
th {
	font-weight: 800;
	font-size: 2em;
}

.tdpos, .tdnavn, .tdnoe, .tdspilt, .tdmer, .tdmest, .tdtotal {
	font-weight: 800;
	font-size: 3em;
}

.tdred {
	color: #FF0000 !important;
}
#rulletopp {
	overflow: hidden; height: 523px !important;
}

Javascript:

//run instantly and then goes after (setTimeout interval)
//Første rulling i det man laster siden
$("#rulletopp").delay( 1000 ).animate({ scrollTop: $("#rulletopp")[0].scrollHeight }, 30000, "linear");
//Rulling opp igjen
setTimeout(function() {
	//Fart opp igjen
	$("#rulletopp").animate({scrollTop:0}, 1000); 
//Delay før første gang den rulletoppr opp igjen.
},1000);

setInterval(function(){
	// 4000 - it will take 4 secound in total from the top of the page to the bottom
	$("#rulletopp").delay( 15000 ).animate({ scrollTop: $("#rulletopp")[0].scrollHeight }, 30000,"linear");
	setTimeout(function() {
		$("#rulletopp").animate({scrollTop:0}, 1000); 
	},1000);

},1000);

Som dere ser av lenken er kolonnene i tabellene på linje, som jeg ønsker. Det er imidlertid ikke mulig å scrolle i den nederste tabellen manuelt.

kjekset · 28. september 2015

Kan du prøve å legge denne koden inn i cssfilen? Samtidig sletter du overflow:hidden til #rulletopp (linje 24).

#rulletopp::-webkit-scrollbar {
    overflow: hidden;
    width: 0;
}

Endret 28. september 2015 av kjekset

erolha · 28. september 2015

Kan du prøve å legge denne koden inn i cssfilen? Samtidig sletter du overflow:hidden til #rulletopp (linje 24).
#rulletopp::-webkit-scrollbar {
    overflow: hidden;
    width: 0;
}

Wow, så enkelt! Tusen takk!

(Flere som er oppe tidlig for å se på månen?)

Logg inn

[Løst] Fjerne scrollbar fra div

Anbefalte innlegg

erolha

Lenke til kommentar

Videoannonse

kjekset

Lenke til kommentar

erolha

Lenke til kommentar

kjekset

Lenke til kommentar

erolha

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer