【问题标题】:Horizontal scrolling in Android Chrome with JavaScript not working as expected使用 JavaScript 的 Android Chrome 中的水平滚动无法按预期工作
【发布时间】:2018-10-18 06:45:37
【问题描述】:

我刚刚创建了一个小测试代码,你可以在这里找到它

http://paloula.de/test/width_002.html

在 Chrome/Windows 下可以正常工作,但如果您在 Chrome/Windows 下模拟手机(例如 Galaxy S5)或在带有 Chrome 的 Android 手机下则不行:页面向左滚动,但未达到最大 scrollLeft。

是css吗?是元标记吗?计算似乎是正确的。

有什么想法吗?谢谢!

完整代码:

<!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>

【问题讨论】:

    标签: javascript android google-chrome mobile


    【解决方案1】:

    解决方法是在meta/viewport标签中加入minimum-scale=1

    &lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,  minimum-scale=1"/&gt; 

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-05-07
      • 2013-07-10
      • 2015-05-17
      • 1970-01-01
      相关资源
      最近更新 更多