Frank: Scrollen mit JavaScript unter Chrome Android: Maximum ScrollLeft?

Beitrag lesen

problematische Seite

Hallo,

auf der kleinen Testseite (siehe Link) versuche ich, die Seite kurz mit JS nach ganz links zu scrollen und dann wieder zurück. Das funktioniert ganz gut unter Chrome/Windows, aber nicht, wenn man unter Chrome Windows ein mobiles Gerät simuliert oder unter Chrome/Android auf einem mobilen Gerät. Es wird nur ein bisschen gescrollt, aber nicht bis zum Maximum.

Woran kann das liegen? Warum verhält sich Chrome/Android anders?

Danke für Ideen und Hinweise!

Frank

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/> 
		<style>		
* {
		margin: 0;
		padding: 0;

}	
HTML {
		display: block;
		position: relative;		
		height:100%;
}	
BODY {
		display: block;
		position: relative;	
		min-height: 100%; 
		/* overflow-y: scroll; */
}			
		</style>
	
	</head>
	<body id="body">	
		<div style="background-color: #FF0000; display: block; position: relative; width: 1700px; height: 50px;">
				<div style="background-color: #0000FF; display: block; position: absolute; width: 50px; height: 50px; right: 0"></div>
				<div style="background-color: #FF00FF; display: block; position: absolute; width: 50px; height: 50px; left: 0"></div>
		</div>		

		<script>
				var scrollWidth = document.documentElement.scrollWidth;
				var clientWidth = document.documentElement.clientWidth;
				var offsetWidth = document.documentElement.offsetWidth;
				console.log(scrollWidth);
				console.log(clientWidth);
				console.log(offsetWidth);			
				
				var maxScrollLeft = scrollWidth - clientWidth;
				console.log("maxScrollLeft " + maxScrollLeft)
				
				setTimeout(function() {	
							window.scrollTo(maxScrollLeft, 0);
				}, 1);	

				setTimeout(function() {		
							window.scrollTo(0, 0);
				}, 500);										
		</script>		
	</body>
</html>