• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[SCRIPTSUCHE] Scrollbar erscheint nur beim Scrollen

die seite hat die längste ladezeit die ich in meinem leben gesehen habe. unterirdisch. das scheint auch nicht nur den scrollbalken zu betreffen sondern auch das scrollverhalten selbst.
 
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#scrollWrapper {
	overflow: hidden;
	position: relative;
	height: 200px;
	border: 1px solid black;
}
#scroll {
	overflow: auto;
	height: 100%;
	line-height: 200px;
	padding-right: 30px;
	margin-right: -30px;
}
</style>
</head>
<body>
<div id="scrollWrapper">
	<div id="scroll">
		scroll me (long text to make the line full:
			a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
		if you can<br>and want
	</div>
</div>
<script type="text/javascript">
var timeout = false;
document.getElementById("scroll").onscroll = function(){
	window.clearTimeout(timeout);
	this.style.paddingRight = this.style.marginRight= "0px";
	
	var This = this;
	window.setTimeout(function(){
		This.style.paddingRight = This.style.marginRight= "";
	}, 500);
}
</script>
</body>
</html>
 
danke kkapsner habe mal eine Fiddle raus gemacht zum spielen https://jsfiddle.net/nynwuz2L/
der Ansatz ist schonmal gu, nur in meinem Beispiel ist die scrollbar fliegend, alsoes ist kein abstand berechnet worden rechts,
ich habe eine tabelle/liste, die soll bis zum Rand des containers gehen und auch nicht einrücken beim scrollen, da es auch headlines gibt

NACHTRAG: Ich hab dir hier mal verdeutlicht was ich meine https://jsfiddle.net/nynwuz2L/1/
 
Zuletzt bearbeitet:
OK - das ist mit nativen Scrollbalken nicht so einfach, aber auch machbar:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#scrollWrapper {
	overflow: hidden;
	position: relative;
	height: 200px;
	border: 1px solid black;
}
#scroll {
	overflow: hidden;
	height: 100%;
	line-height: 200px;
}
#scroller {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
	opacity: 0;
}
</style>
</head>
<body>
<div id="scrollWrapper">
	<div id="scroller"><div></div></div>
	<div id="scroll">
		scroll me (long text to make the line full:
			a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
		if you can<br>and want
	</div>
</div>
<script type="text/javascript">
var scroller = document.getElementById("scroller");
var scroll = document.getElementById("scroll");

scroller.firstChild.style.height = scroll.scrollHeight + "px";

var timeout = false;
scroller.onscroll = function(){
	scroll.scrollTop = scroller.scrollTop;
	scroll.scrollLeft = scroller.scrollLeft;
	window.clearTimeout(timeout);
	this.style.opacity = 1;
	
	var This = this;
	window.setTimeout(function(){
		This.style.opacity = "";
	}, 500);
}
</script>
</body>
</html>
- Nachteil: man kann in dem inneren Teil nichts mehr markieren.
 
ok und wie kann man es machen dass wenn man auf dem scrollbalken steht, der stehenbleibt und nicht verschwindet?
 
Dazu müsste man einen mousemove-Eventlistener registrieren, der das <div> einblendet, wenn sich die Maus an der richtigen Stelle befindet.

Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#scrollWrapper {
	overflow: hidden;
	position: relative;
	height: 200px;
	border: 1px solid black;
}
#scroll {
	overflow: hidden;
	height: 100%;
	line-height: 200px;
}
#scroller {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
	opacity: 0;
}
</style>
</head>
<body>
<div id="scrollWrapper">
	<div id="scroller"><div></div></div>
	<div id="scroll">
		scroll me (long text to make the line full:
			a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
		if you can<br>and want
	</div>
</div>
<script type="text/javascript">
var scroller = document.getElementById("scroller");
var scroll = document.getElementById("scroll");

scroller.firstChild.style.height = scroll.scrollHeight + "px";

var timeout = false;
scroller.onscroll = function(ev){
	scroll.scrollTop = scroller.scrollTop;
	scroll.scrollLeft = scroller.scrollLeft;
	window.clearTimeout(timeout);
	this.style.opacity = 1;
	
	var This = this;
	if (this.clientWidth > ev.clientX){
		timeout = window.setTimeout(function(){
			This.style.opacity = "";
		}, 500);
	}
}
scroller.onmousemove = function(ev){
	window.clearTimeout(timeout);
	if (this.clientWidth < ev.clientX){
		this.style.opacity = 1;
	}
	else {
		var This = this;
		timeout = window.setTimeout(function(){
			This.style.opacity = "";
		}, 500);
	}
}
</script>
</body>
</html>
- wobei ich hier für die Messung irgendein Framework verwenden würde. ev.clientX ist nicht 100%ig korrekt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben