JavaScript scrollTop не работает на мобильном телефоне - PullRequest
Новая
       13

JavaScript scrollTop не работает на мобильном телефоне

0 голосов
/ 10 марта 2019

Я пытаюсь разработать приложение, но столкнулся с проблемой.Вы знаете реальные приложения, такие как Apple Shortcuts или Cydia, когда вы прокручиваете их, все они имеют эффект с названиями вверху, у меня есть два примера здесь: https://streamable.com/j5yu5

Я пытаюсь сделать то же самое, это делаетработать на компьютерах, но не на моем мобильном телефоне (iPhone 7+, работает под управлением iOS 12.1.1, Jailbroken, пробовал полноэкранное сафари, веб-клип)

вот мой код прямо сейчас: 

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

откройте фрагмент в полноэкранном режиме, просмотрите как мобильный телефон и перетаскивайте его мышью вместо прокрутки.Это работает на моем компьютере, но не на моем телефоне.Есть идеи?Заранее спасибо.

ps: get -функция такая же, как и у jQuery $ , а end -функция такая жекак на touchend

1 Ответ

0 голосов
/ 10 марта 2019

После лота исследований я нашел решение. document.documentElement.scrollTop не работает в мобильных браузерах, поэтому мы должны использовать window.pageYOffset .

...