CODEWITHSUNDEEP
javascriptjqueryframeworksscrolltop
codeWithMe
codeWithMe

Reputation: 892

JavaScript scrollTop not working on mobile

I am trying to develop an application, but I ran into a problem. You know real applications like Apple's Shortcuts or Cydia, when you scroll they all have an effect with the titles at the top, I have two examples here: https://streamable.com/j5yu5

I am trying to do the same, it does work on the computers, but not on my mobile phone (iPhone 7+, running iOS 12.1.1, Jailbroken, tried fullscreen safari, webclip)

here is my code right now:

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

open the snippet in fullscreen, and inspect as a mobile and drag with the mouse instead of scrolling. That works on my computer, but not on my phone. Any ideas? thanks in advance.

ps: the get-function is the same as the jQuery's $, and the end-function is the same as ontouchend

Upvotes: 6

Views: 11695

Answers (4)

nevf
nevf

Reputation: 4826

According to Google Bard: "Viewport Resizing: On most mobile browsers, the viewport (visible area) resizes to accommodate the keyboard, pushing content upward and potentially making scrollTo(0, 0) ineffective."

On Android window.scrollTo( 0, 0 ) doesn't work when the virtual keyboard is open. It does work on Safari though.

ref: https://g.co/bard/share/dd329f9a9b53

Upvotes: 0

Me Sa
Me Sa

Reputation: 1104

above methods didnt work for me on mobile browsers: then I used the below code and worked properly:

first, need to define an id for your page container as body-container then:

    document.getElementById('body-container').scrollTo(0, 0)

in angular I put this code in router.events to trigger it after any routing:

router.events.subscribe((event: Event) => {
   document.getElementById('body-container').scrollTo(0, 0)
}

Upvotes: 0

AxonCodes
AxonCodes

Reputation: 11

You can use document.scrollingElement.scrollTop It works perfectly fine on both ios and other platforms

Upvotes: 1

codeWithMe
codeWithMe

Reputation: 892

After a lot of research I came up with a solution. document.documentElement.scrollTop does not work in mobile browsers, so we have to use window.pageYOffset instead.

Upvotes: 7

Related Questions