个人中心
gpt4 book ai didi

ios - CSS Scroll-Snapping 不断跳过它应该捕捉到的元素之一

转载 作者：行者123 更新时间：2023-11-27 23:50:24 25 4
gpt4 key购买 nike

所以这目前应该是一个只适用于移动设备的网站。当我在检查器的 Chrome 移动 View 中查看它时，它工作得很好。然而，当我使用 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>

记住!这应该只适用于移动设备，所以如果不在移动尺寸上，它看起来会很乱。

最佳答案

您可以尝试将 -webkit- 前缀添加到关键帧吗？因为对于 iOS 上的 Safari，您应该使用供应商前缀 -webkit- 来实现(如您在 developer.mozilla.org 上看到的那样)，如下所示:

`@-webkit-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); }
}`

关于ios - CSS Scroll-Snapping 不断跳过它应该捕捉到的元素之一，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56574488/

25 4 0
文章推荐： javascript - js。使用delete后的array.indexOf
文章推荐： javascript - MS CRM 2015 使用 JavaScript 通过另一个实体记录 iFrame 的 id 编辑和显示自定义实体记录
文章推荐： javascript - Protobuf-net 不会反序列化来自 Protobuf.js 的数据
文章推荐： javascript - 滚动条因背景图片而消失
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com