JavaScript scrollTop 不适用于移动设备

Question

JavaScript scrollTop 不适用于移动设备

cod*_*hMe 5 javascript jquery frameworks scrolltop

我正在尝试开发应用程序，但遇到了问题。您知道像 Apple 的快捷方式或 Cydia 这样的真实应用程序，当您滚动它们时，它们都会对顶部的标题产生影响，我在这里有两个示例：https : //streamable.com/j5yu5

我正在尝试做同样的事情，它可以在计算机上运行，但不能在我的手机上运行（iPhone 7+，运行 iOS 12.1.1，越狱，尝试全屏 safari，webclip）

这是我现在的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Adam Izgin</title>
	<script src="http://koda.nu/arkivet/94004581"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
	<style>

		* {
			font-family: Chalkboard SE;
		}

		html, body {
			background: #fff;
			scroll-behavior: smooth;
		}

		body {
			height: 150vh;
		}
		
		#header {
			width: 100vw;
			height: 50px;
			background: #fff;
			position: fixed;
			top: 0;
			left: 0;
		}

		#title {
			font-size: 20px;
			font-weight: 900;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			opacity: 0;
			transition: opacity 250ms ease-in-out;
		}

		.title {
			margin: 40px 20px;
			font-weight: 900;
			font-size: 30px;
			opacity: 1;
		}

		#top {
			position: absolute;
			top: 0;
			left: 0;
		}

	</style>
	<script>
		
		$(document).ready(function() {
			get('html').end(function() {
				if (html.scrollTop > 30) {
					alert('Hello, World!');
				};
			});
		});

	</script>
</head>
<body>

	<div id="top"></div>

	<div id="header">
		<h1 id="title">text</h1>
	</div>

   <h1 class="title" id="title1">text</h1>
	
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

全屏打开代码片段，并作为移动设备进行检查并用鼠标拖动而不是滚动。这在我的电脑上有效，但在我的手机上无效。有任何想法吗？提前致谢。

PS：在GET -函数是一样的jQuery的$，并结束-函数是一样的touchend

Answer 1

cod*_*hMe 5

经过大量研究，我想出了一个解决方案。 document.documentElement.scrollTop在移动浏览器中不起作用，所以我们必须使用window.pageYOffset代替。

归档时间：	6 年，7 月前
查看次数：	2300 次
最近记录：	4 年，8 月前