CSS Scroll-Snapping 不断跳过它应该捕捉到的元素之一
Posted
技术标签:
【中文标题】CSS Scroll-Snapping 不断跳过它应该捕捉到的元素之一【英文标题】：CSS Scroll-Snapping keeps skipping over one of the elements it is supposed to snap to 【发布时间】：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>记住！这应该仅适用于移动设备，因此如果不在移动设备尺寸上，它看起来会很混乱。
【问题讨论】：
【参考方案1】：您可以尝试在关键帧中添加 -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);
`
【讨论】：
谢谢，我现在添加了，但它并没有解决捕捉跳过中心项目的问题。 我在使用 iPhone 4 的 iOS 上遇到了确切的问题，在其他所有手机上我的动画效果都很好，只有在 iPhone 4 上它很慢而且不起作用，那是 3 个月前的事情，现在仍然没有t 工作.. iOS 和动画/转换有问题。以上是关于CSS Scroll-Snapping 不断跳过它应该捕捉到的元素之一的主要内容，如果未能解决你的问题，请参考以下文章
使用 Nokogiri 和 Selenium，如果驱动程序无法执行命令，是不是可以跳过它？