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:
I am trying to do the same, it does work on the puters, 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=""></script>
<script src=".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>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./j5yu5
I am trying to do the same, it does work on the puters, 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./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 puter, 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
Share Improve this question asked Mar 10, 2019 at 14:03 codeWithMecodeWithMe 8922 gold badges12 silver badges17 bronze badges4 Answers
Reset to default 7After 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.
You can use document.scrollingElement.scrollTop
It works perfectly fine on both ios and other platforms
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)
}
According to Google Bard: "Viewport Resizing: On most mobile browsers, the viewport (visible area) resizes to acmodate 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