【发布时间】：2019-06-13 06:26:15
【问题描述】：
因此，目前这应该是一个仅适用于移动设备的网站。当我在检查器的 Chrome 移动视图上查看它时，它工作得非常好。然而，当我使用 safari 或我的手机时，它会搞砸并跳过它应该捕捉到的第二个。以下是相关代码：
function startGreet(){
const greets = ["Hey","Hello","Good Morning"];
const p = document.getElementById('greeting');
p.innerHTML = greets[Math.floor(Math.random() * greets.length)];
}
/* If reaches bottom of page do something code
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
}
};
*/@keyframes jump {
0% { transform: translate(0,0); }
20% { transform: translate(0,-95%); }
40% { transform: translate(0,15%); }
60% { transform: translate(0,-10%); }
80% { transform: translate(0,0%); }
100% { transform: translate(0,0); }
}
body{
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling:touch;
}
html, body{
position:absolute;
overflow:auto;
overflow-x: hidden;
margin:0;
height: 100vh;
width:100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color:white;
}
#greeting{
position:absolute;
width:100%;
font-size:75px;
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
margin-top:75%;
color:black;
}
#slideUp{
position:absolute;
height:5%;
width:100%;
font-size:70px;
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
margin:0;
bottom:10%;
color:#686868;
-moz-animation: jump 2.5s 3s infinite;
-webkit-animation: jump 2.5s 3s infinite;
-o-animation: jump 2.5s 3s infinite;
animation: jump 2.5s 3s infinite;
}
#scrollCont{
position:absolute;
overflow: scroll;
top:0;
height: 100vh;
width:100%;
-webkit-overflow-scrolling: touch;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
-webkit-scroll-snap-stop: normal;
scroll-snap-stop: normal;
}
.row{
position: relative;
width:100vw;
height: 100vh;
-webkit-scroll-snap-align: start end;
scroll-snap-align: start end;
scroll-snap-stop: always;
}
#home{
position: relative;
width:100vw;
height: 100vh;
-webkit-scroll-snap-align: none;
scroll-snap-align: none;
}
#flower{
width:150%;
}
#secondRow{
color:black;
word-wrap: break-word;
background-color:#a0dfff;
overflow:hidden;
}
#secondRow .title{
padding-top:5%;
color:black;
font-weight: 100;
font-family: 'Lato', sans-serif;
font-size: 62.5px;
margin-left:10%;
margin-top:5%;
}
#secondRow hr{
border-color: black;
}
#bodyCont{
font-size:40px;
position:relative;
top:10%;
left:10%;
width:80%;
color:black;
font-family: 'Lato', sans-serif;
}
#thirdRow{
background-color:black;
}
#thirdRow .title{
padding-top:5%;
color:white;
font-weight: 100;
font-family: 'Lato', sans-serif;
font-size: 62.5px;
margin:0;
margin-left:10%;
}
#thirdRow hr{
border-color: white;
}<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:300|Roboto+Condensed&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="mainMenu.css">
<link rel="stylesheet" type="text/css" href="indexR2.css">
<link rel="stylesheet" type="text/css" href="indexR3.css">
<script src="mainMenu.js"></script>
</head>
<body onload="startGreet()">
<div id="scrollCont">
<div id="home">
<h1 id="greeting" ></h1>
<p id="slideUp" >^ ^ ^</p>
</div>
<div id="secondRow" class="row">
<h1 class="title">Introduction</h1>
<hr>
<div id="bodyCont">
<p><i>text text text text text</i></p>
<img id="flower" src="https://cdn.pixabay.com/photo/2012/04/18/19/18/shrub-37619_640.png"/>
</div>
</div>
<div id="thirdRow" class="row">
<h1 class="title">Introduction</h1>
</div>
</div>
<!--<img id="videos" src="https://www.sccpre.cat/mypng/full/15-156384_old-camera-png-camera-drawing-transparent-background.png"/>-->
</body>
</html>记住！这应该仅适用于移动设备，因此如果不在移动设备尺寸上，它看起来会很混乱。
【问题讨论】：
标签： ios css mobile safari vertical-scrolling